/* Live Fusion Zürich · tokens → base → components → header → home sections → legal/404 → footer → sticky bar → breakpoints → motion.
   Colours are semantic tokens: dark by default, .light flips them, .dark restores them inside a light section. */

/* ===== Tokens ===== */
:root {
  --ink-900: #0f0e0b; --ink-800: #161410; --ink-700: #1f1c17; --ink-600: #2a261f;
  --ivory-50: #f5f0e6; --ivory-100: #ebe4d4; --ivory-200: #ddd3bf;
  --gold-300: #e7ca8f; --gold-400: #d9b36c; --gold-700: #7a5a16; --today: #e9dcbd;
  --muted-on-dark: #b9b0a0; --text-on-light: #1c1914; --muted-on-light: #5e5648;
  --line-dark: rgb(245 240 230 / .12); --line-dark-strong: rgb(245 240 230 / .4);
  --line-light: rgb(28 25 20 / .12); --line-light-strong: rgb(28 25 20 / .5);
  --font-display: 'Bricolage Grotesque', 'Bricolage Fallback', system-ui, sans-serif;
  --font-body: 'DM Sans', 'DM Sans Fallback', system-ui, sans-serif;
  --fs-h1: clamp(2.5rem, 1.6rem + 3.9vw, 4.75rem);
  --fs-h2: clamp(1.875rem, 1.35rem + 2.2vw, 3.25rem);
  --fs-h3: clamp(1.25rem, 1.1rem + .6vw, 1.5rem);
  --fs-price: clamp(3rem, 2.4rem + 2.6vw, 4.5rem);
  --fs-lead: clamp(1.0625rem, 1rem + .3vw, 1.25rem);
  --fs-meta: .875rem; --fs-overline: .8125rem;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section: clamp(2.5rem, 1.2rem + 5.33vw, 6rem); /* 40 @390 · 60 @768 · 96 @1440 */
  --max: 1200px;
  --r-sm: 6px; --r-md: 12px; --r-lg: 20px; --r-top: 24px; --r-pill: 999px;
  --shadow-float: 0 1px 2px rgb(0 0 0 / .22), 0 10px 28px rgb(0 0 0 / .2);
  --shadow-pop: 0 18px 48px rgb(0 0 0 / .35);
  --ease: cubic-bezier(.22, 1, .36, 1); --dur-1: 150ms; --dur-2: 250ms;
  --header-h: 60px; /* app.js replaces it with the measured header height */
  --bar-h: 64px;
}
:root, .dark {
  --bg: var(--ink-800); --surface: var(--ink-700); --text: var(--ivory-50); --muted: var(--muted-on-dark);
  --accent: var(--gold-400); --line: var(--line-dark); --line-strong: var(--line-dark-strong);
  --focus: var(--gold-300); --btn-bg: var(--gold-400); --btn-bg-hover: var(--gold-300); --btn-fg: var(--ink-800);
  --dot-open: #7cc48a; --dot-later: var(--gold-400); --dot-closed: #d98b6a;
}
.light {
  --bg: var(--ivory-50); --surface: var(--ivory-100); --text: var(--text-on-light); --muted: var(--muted-on-light);
  --accent: var(--gold-700); --line: var(--line-light); --line-strong: var(--line-light-strong);
  --focus: var(--ink-800); --btn-bg: var(--ink-800); --btn-bg-hover: var(--ink-600); --btn-fg: var(--ivory-50);
  --dot-open: #2f8a45; --dot-later: var(--gold-700); --dot-closed: #a4502c;
  color-scheme: light;
}

/* Metric-matched fallbacks (Arial metrics; Liberation Sans is metric-compatible), set slightly narrower
   than the web fonts so text never wraps onto more lines while the fonts load (no layout shift). */
@font-face { font-family: 'Bricolage Fallback'; src: local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold'), local('LiberationSans-Bold'); font-weight: 500 700; size-adjust: 86%; ascent-override: 108%; descent-override: 31%; line-gap-override: 0%; }
@font-face { font-family: 'DM Sans Fallback'; src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('LiberationSans'); font-weight: 400; size-adjust: 101%; ascent-override: 98%; descent-override: 31%; line-gap-override: 0%; }
@font-face { font-family: 'DM Sans Fallback'; src: local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold'), local('LiberationSans-Bold'); font-weight: 500 700; size-adjust: 96%; ascent-override: 103%; descent-override: 32%; line-gap-override: 0%; }

/* ===== Base ===== */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { color-scheme: dark; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* Anchor targets and focused controls stop clear of the sticky header (and, below 1024 px, of the booking bar).
   Set on them rather than as scroll-padding on html: with scroll-padding, focusing a control inside the sticky
   header (Escape in the menu or in the language list) made Chrome scroll the page up by up to a screen. */
main, main [id], main :is(a, button, summary, [tabindex]), .site-footer :is(a, button) { scroll-margin-top: calc(var(--header-h) + var(--s4)); }
body { margin: 0; background: var(--ink-800); color: var(--text); font: 400 1rem/1.6 var(--font-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-wrap: break-word; }
body.menu-open { overflow: hidden; }
h1, h2, h3, p, figure, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; text-wrap: balance; }
h1 { font-size: var(--fs-h1); line-height: 1; letter-spacing: -.045em; }
h2, .legal-hero h1, .not-found h1 { font-size: var(--fs-h2); line-height: 1.08; letter-spacing: -.035em; }
h3, .h3, .legal-article h2 { font-size: var(--fs-h3); line-height: 1.2; letter-spacing: -.02em; }
p { text-wrap: pretty; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
address { font-style: normal; }
.icon { flex: none; width: 1.25em; height: 1.25em; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.visually-hidden, .review-label { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; top: var(--s2); left: var(--s4); z-index: 100; padding: 12px 20px; border-radius: var(--r-pill); background: var(--gold-400); color: var(--ink-800); font-weight: 600; transform: translateY(-200%); }
.skip-link:focus { transform: none; }
.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.section { padding-block: var(--section); background: var(--bg); color: var(--text); }
.light.section { border-radius: var(--r-top) var(--r-top) 0 0; }
/* Two light sections in a row (the all you can eat, then the desserts) form one cream band: no rounded join, which
   would show the dark page in its corners, but a hairline at the content width halfway through the usual spacing. */
.light.section + .light.section { border-radius: 0; padding-top: 0; }
.light.section + .light.section > .wrap:first-child { padding-top: var(--section); border-top: 1px solid var(--line); }
.section-head { display: grid; gap: var(--s3); }
/* Small uppercase labels: section overlines, footer and legal-index headings, dish tags. */
.overline, .site-footer h2, .legal-index h2, .dish-tag { color: var(--accent); font: 600 var(--fs-overline)/1.3 var(--font-body); letter-spacing: .12em; text-transform: uppercase; }
.overline { display: flex; align-items: center; gap: 10px; }
.overline::before { content: ""; flex: none; width: 24px; height: 1px; background: currentColor; }

/* ===== Components ===== */
.button { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-height: 48px; padding: 10px 24px; border: 1.5px solid transparent; border-radius: var(--r-pill); font: 600 1rem/1.2 var(--font-body); text-align: center; }
.button .icon { width: 18px; height: 18px; }
.button-lg { min-height: 56px; }
.button-primary { background: var(--btn-bg); color: var(--btn-fg); }
.button-primary:hover { background: var(--btn-bg-hover); }
.button-secondary { border-color: var(--line-strong); color: var(--text); }
.button-secondary:hover { border-color: var(--accent); }
/* Text links are 44 px tall on one line; when a label wraps, the arrow follows the last word. */
.text-link, .footer-link { display: inline-block; padding-block: 10px; line-height: 24px; }
.text-link { font-weight: 600; text-decoration: underline 1px; text-underline-offset: 5px; }
.text-link:hover { text-decoration-thickness: 2px; }
.text-link .icon, .footer-link .icon { width: 18px; height: 18px; vertical-align: -4px; }
.text-link > span + .icon, .footer-link > span + .icon, .nowrap > .icon { margin-left: 4px; }
.nowrap { white-space: nowrap; }
.text-link > .icon + span { margin-left: 6px; }
.icon-button { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--text); }
.icon-button:hover { border-color: var(--accent); }
/* Live opening status: the text always states it, the dot only repeats it. */
.open-status { display: inline-flex; align-items: center; gap: var(--s2); min-height: 32px; padding: 4px 12px 4px 10px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); font: 500 var(--fs-meta)/1.25 var(--font-body); }
.open-status::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--dot-closed); }
.open-status[data-state="open"]::before { background: var(--dot-open); box-shadow: 0 0 0 3px rgb(124 196 138 / .2); }
.open-status[data-state="later"]::before { background: var(--dot-later); }

/* ===== Header, language switcher, mobile menu ===== */
.site-header { position: sticky; top: 0; z-index: 30; background: var(--ink-800); border-bottom: 1px solid var(--line-dark); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); height: 60px; }
.brand { display: inline-flex; align-items: center; gap: 10px; min-width: 44px; min-height: 44px; }
.brand img { width: 38px; height: auto; }
.brand span { font: 600 .75rem/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.primary-nav, .header-book { display: none; }
.header-actions { display: flex; align-items: center; gap: var(--s1); }
.menu-toggle .icon-close, .menu-toggle[aria-expanded="true"] .icon-open { display: none; }
.menu-toggle[aria-expanded="true"] .icon-close { display: block; }
.lang-switch { position: relative; }
.lang-switch summary { display: inline-flex; align-items: center; justify-content: center; gap: 2px; min-width: 44px; height: 44px; padding: 0 6px 0 10px; border-radius: var(--r-pill); font: 600 .875rem/1 var(--font-body); letter-spacing: .06em; list-style: none; cursor: pointer; }
.lang-switch summary::-webkit-details-marker { display: none; }
.lang-switch summary:hover { background: var(--ink-700); }
.lang-switch summary .icon { width: 16px; height: 16px; }
.lang-switch[open] summary .icon { transform: rotate(180deg); }
.lang-popover { position: absolute; top: calc(100% + var(--s2)); right: 0; z-index: 45; display: grid; min-width: 210px; padding: 6px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--ink-700); box-shadow: var(--shadow-pop); }
.lang-popover a { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); min-height: 44px; padding: 0 var(--s3); border-radius: 8px; }
.lang-popover a:hover { background: var(--ink-600); }
.lang-popover a[aria-current] { color: var(--gold-400); }
.lang-code { color: var(--muted); font-size: .875rem; font-weight: 600; letter-spacing: .06em; }
.mobile-menu { position: fixed; inset: var(--header-h) 0 0; z-index: 40; overflow-y: auto; overscroll-behavior: contain; background: var(--ink-800); }
.mobile-menu-inner { display: grid; gap: 20px; padding-block: var(--s1) var(--s6); }
.mobile-nav { display: grid; }
.mobile-nav a { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: 52px; border-bottom: 1px solid var(--line); font: 600 1.5rem/1.2 var(--font-display); letter-spacing: -.02em; }
.mobile-nav .icon { width: 22px; height: 22px; color: var(--accent); }
.menu-offer { display: grid; gap: var(--s2); padding: 20px; border-radius: var(--r-lg); background: var(--surface); }
.menu-offer-title { font: 600 1.25rem/1.2 var(--font-display); letter-spacing: -.02em; }
.menu-offer-meta, .menu-langs > p { color: var(--muted); }
.menu-offer .open-status { justify-self: start; }
.menu-offer .button { margin-top: var(--s1); }
.quick-link { display: flex; align-items: center; gap: var(--s3); min-height: 46px; border-bottom: 1px solid var(--line); font-weight: 500; }
.quick-link .icon { width: 20px; height: 20px; color: var(--accent); }
.quick-link .icon:last-child:not(:first-child) { margin-left: auto; }
.menu-langs { display: grid; gap: var(--s2); font-size: var(--fs-meta); }
.lang-pills, .footer-langs { display: flex; flex-wrap: wrap; gap: var(--s1); }
.lang-pills a, .footer-langs a { display: grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--r-pill); font-size: .875rem; font-weight: 600; }
.lang-pills a[aria-current], .footer-langs a[aria-current] { border-color: var(--gold-400); background: var(--gold-400); color: var(--ink-800); }

/* ===== Hero ===== */
.hero { background: var(--ink-800); }
.hero-inner { display: grid; grid-template-areas: "media" "copy"; padding-bottom: 40px; }
.hero-media { position: relative; grid-area: media; }
.hero-image { width: 100%; aspect-ratio: 16 / 9; min-height: 180px; max-height: 33vh; max-height: 33svh; object-fit: cover; }
.seal { position: absolute; right: var(--gutter); bottom: -20px; display: grid; place-content: center; justify-items: center; gap: 1px; width: 120px; aspect-ratio: 1; border-radius: 50%; background: var(--gold-400); color: var(--ink-800); text-align: center; box-shadow: 0 0 0 5px var(--ink-800); outline: 1px solid rgb(22 20 16 / .35); outline-offset: -7px; }
.seal-label { max-width: 78px; font: 600 .75rem/1.1 var(--font-body); letter-spacing: .04em; text-transform: uppercase; }
.seal-per { font: 600 .6875rem/1.1 var(--font-body); letter-spacing: -.01em; white-space: nowrap; } /* "par personne" stays inside the ring */
.seal strong { display: flex; align-items: flex-start; gap: 2px; font: 600 2.125rem/.9 var(--font-display); letter-spacing: -.04em; }
.seal small { margin-top: .2em; font: 600 .75rem/1 var(--font-body); letter-spacing: .04em; }
.hero-copy { grid-area: copy; width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; padding-top: var(--s5); }
/* Reserved row; the pill sits on top of it (and may use the overline's margin when a long text wraps),
   so the live status never shifts the hero when app.js fills it. */
.hero-status { position: relative; min-height: 32px; }
.hero-status .open-status { position: absolute; top: 0; left: 0; max-width: 100%; }
.hero-copy .overline { margin-top: var(--s4); }
.hero h1 { margin-top: var(--s2); }
.hero-facts { margin-top: var(--s3); font-weight: 600; line-height: 1.5; text-wrap: balance; }
.hero-facts li { display: inline; }
/* Lines break after a separator only, never inside "Martedì–sabato". */
.hero-facts span { white-space: nowrap; }
.hero-facts li:not(:last-child)::after { content: "\a0·\20"; content: "\a0·\20" / ""; color: var(--accent); }
.hero-lead { max-width: 46ch; margin-top: var(--s2); color: var(--muted); font-size: var(--fs-lead); line-height: 1.5; }
.hero-actions { display: grid; gap: var(--s3); margin-top: var(--s5); }
.hero-actions > .button { width: 100%; }
/* Paired secondary buttons share a row by content width, so neither label has to wrap. */
.hero-secondary, .button-pair { display: flex; flex-wrap: wrap; gap: var(--s3); }
.hero-secondary .button, .button-pair .button { flex: 1 1 auto; padding-inline: var(--s4); }

/* ===== All you can eat ===== */
.offer-layout { display: grid; gap: var(--s6); }
.offer-card { overflow: hidden; border-radius: var(--r-lg); background: var(--bg); color: var(--text); }
.offer-body { display: grid; gap: var(--s4); padding: 20px; }
.offer-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s1) var(--s3); }
.offer-amount { display: inline-flex; align-items: flex-start; gap: .25em; color: var(--accent); font: 600 1.25rem/1 var(--font-display); letter-spacing: -.01em; }
.offer-number { font-size: var(--fs-price); line-height: .8; letter-spacing: -.045em; }
.offer-when { margin-top: calc(-1 * var(--s2)); font-weight: 500; }
.offer-per, .offer-excluded { color: var(--muted); }
/* Checklist and steps use run-in titles: the bold title opens the line, the description follows. */
.checklist { display: grid; gap: var(--s3); padding-top: var(--s4); border-top: 1px solid var(--line); }
.checklist li { display: grid; grid-template-columns: 22px 1fr; gap: var(--s3); max-width: 46ch; }
.checklist .icon { width: 22px; height: 22px; margin-top: 1px; color: var(--accent); }
.checklist strong, .steps strong { margin-right: .25em; font-weight: 600; }
.checklist span, .steps p span { color: var(--muted); }
.offer-conditions { padding-top: var(--s4); border-top: 1px solid var(--line); color: var(--muted); }
.offer-conditions .icon { width: 18px; height: 18px; margin-right: 8px; color: var(--accent); vertical-align: -3px; }
.offer-how { display: grid; gap: 20px; }
.steps { display: grid; gap: var(--s4); }
.steps li { display: grid; grid-template-columns: 36px 1fr; gap: var(--s3) var(--s4); align-items: start; max-width: 46ch; }
.step-number { display: grid; place-items: center; width: 36px; height: 36px; border: 1.5px solid var(--line-strong); border-radius: 50%; font: 600 1.0625rem/1 var(--font-display); }
.steps li:first-child .step-number { border-color: var(--ink-800); background: var(--ink-800); color: var(--ivory-50); }
.steps p { padding-top: 5px; }
.steps strong { font: 600 1.125rem/1.3 var(--font-display); letter-spacing: -.01em; }
/* All-you-can-eat slideshow: a scroll-snap strip of square photos, one per view on phones and two from 600 px.
   It swipes and scrolls natively; app.js moves it on by itself and adds the dots (decorative, clickable). */
.offer-slides { display: grid; gap: var(--s2); min-width: 0; }
.offer-slides-track { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; gap: var(--s4); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: var(--r-lg); }
.offer-slides-track::-webkit-scrollbar { display: none; }
.offer-slides-track:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.offer-slide { scroll-snap-align: start; }
.offer-slide img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-lg); -webkit-user-drag: none; }
.offer-slides-dots { display: flex; justify-content: center; }
.offer-slides-dots:empty { display: none; }
.offer-slides-dots span { display: grid; place-items: center; width: 24px; height: 24px; cursor: pointer; }
.offer-slides-dots span::before { content: ''; width: 8px; height: 8px; border-radius: var(--r-pill); background: var(--line-strong); }
.offer-slides-dots .is-active::before { width: 20px; background: var(--accent); }

/* ===== Reviews ===== */
.reviews { --bg: var(--ink-700); --surface: var(--ink-800); padding-bottom: var(--s5); }
.reviews-head { display: grid; gap: var(--s4); margin-bottom: var(--s4); }
.review-links { display: flex; flex-wrap: wrap; gap: var(--s3); }
/* Reserved height = the real Trustindex widget, which switches layout at its own rounded width (measured:
   473 px below 440 px, 430 px from 440 px, 240 px from 635 px). Container queries follow that width whatever
   the scrollbar (hence the .5); the viewport queries before them are the fallback for older browsers. */
.reviews .wrap { container-type: inline-size; }
.review-widget { position: relative; min-height: 473px; }
@media (min-width: 480px) { .review-widget { min-height: 430px; } }
@media (min-width: 690px) { .review-widget { min-height: 240px; } }
@container (min-width: 439.5px) { .review-widget { min-height: 430px; } }
@container (min-width: 634.5px) { .review-widget { min-height: 240px; } }
/* The placeholder lies over the reserved box instead of above the widget, so the widget never stacks under it. */
.review-skeleton { position: absolute; inset: 0; display: grid; grid-auto-columns: 85%; grid-auto-flow: column; gap: var(--s3); overflow: hidden; }
.skeleton-card { display: grid; align-content: start; gap: 10px; min-height: 240px; padding: var(--s5); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.skeleton-card i { display: block; height: 12px; border-radius: 6px; background: rgb(245 240 230 / .08); }
.skeleton-card i:first-child { width: 40%; height: 14px; }
.skeleton-card i:nth-child(3) { width: 90%; }
.skeleton-card i:nth-child(4) { width: 70%; }
/* Loaded or not, the box keeps its reserved height: releasing it would move everything below it (reviews.js). */
.review-widget.is-loaded .review-skeleton, .review-widget.is-failed .review-skeleton { display: none; }
/* Failed: the reserved box becomes a quiet card with the message in the middle. */
.review-widget.is-failed { display: grid; place-content: center; justify-items: center; gap: var(--s3); padding: var(--s6) var(--s5); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); text-align: center; }
.review-widget.is-failed::before { content: "\201C"; content: "\201C" / ""; height: .5em; color: var(--accent); font: 600 3.5rem/1 var(--font-display); }
.review-widget.is-failed .review-status { position: static !important; width: auto; height: auto; max-width: 32ch; margin: 0; overflow: visible; clip: auto; white-space: normal; font-size: var(--fs-lead); line-height: 1.5; }

/* ===== À la carte, frutta realistica and restaurant ===== */
.split-head { display: grid; gap: var(--s4); margin-bottom: var(--s6); }
.split-aside { display: grid; justify-items: start; gap: var(--s3); max-width: 46ch; color: var(--muted); }
.menu-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s5); }
/* Phones: a menu-like list (thumbnail + text); from 768 px four 3:4 tiles in a row. */
.dish-grid { display: grid; gap: var(--s3); }
.dish { display: grid; grid-template-columns: 96px minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: var(--s4); }
.dish-photo { grid-row: 1 / span 3; overflow: hidden; border-radius: var(--r-md); }
.dish img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.dish-tag { font-size: .75rem; }
.dish h3 { margin-top: var(--s1); font-size: 1.0625rem; line-height: 1.25; letter-spacing: -.01em; }
.dish p:last-child { margin-top: var(--s1); color: var(--muted); }
/* Jungle Room, dining room, bar: a swipeable row on phones (the next card peeks in), three columns from 768 px. */
.room-grid { display: flex; gap: var(--s4); padding: 0 var(--gutter) var(--s3); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-color: var(--line-strong) transparent; scrollbar-width: thin; }
.room-grid:focus-visible { outline-offset: -3px; }
.room-card { flex: 0 0 min(72vw, 320px); scroll-snap-align: start; }
.room-card img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--r-lg); }
.room-card figcaption { margin-top: var(--s4); }
.room-card h3 { font-size: var(--fs-h3); }
.room-card p { margin-top: var(--s1); color: var(--muted); }
/* Frutta realistica: the same row with square photos (the dessert sits in the middle of its plate). */
.fruit-grid img { aspect-ratio: 1; }
/* Signature cocktail under the rooms. Phones: photo beside the name, recipe and link at full width
   below; from 768 px the photo sits beside all the text. */
.cocktail { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: var(--s2) var(--s4); margin-top: var(--s7); padding: var(--s4); border-radius: var(--r-lg); background: var(--surface); }
.cocktail img { grid-row: 1 / span 2; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-md); }
.cocktail-copy { display: contents; }
.cocktail .overline { grid-column: 2; align-self: end; }
.cocktail h3 { grid-column: 2; align-self: start; font-size: var(--fs-h3); }
.cocktail-copy > p:not(.overline), .cocktail-copy > a { grid-column: 1 / -1; justify-self: start; }
.cocktail-copy > p:not(.overline) { max-width: 46ch; margin-top: var(--s2); color: var(--muted); }
/* The alcohol-free version: a small box with a "0%" badge under the recipe. */
.cocktail-copy > .cocktail-virgin { grid-column: 1 / -1; }
.cocktail-virgin { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--s4); max-width: 60ch; margin-top: var(--s2); padding: var(--s3) var(--s4); border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--ink-800); }
.virgin-badge { display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid var(--gold-400); border-radius: 50%; color: var(--gold-400); font: 600 1rem/1 var(--font-display); letter-spacing: -.02em; }
.virgin-label { color: var(--accent); font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.cocktail-virgin h4 { margin: 2px 0 0; color: var(--text); font: 600 1.0625rem/1.25 var(--font-display); letter-spacing: -.01em; text-wrap: balance; }
.cocktail-virgin p:last-child { margin-top: 2px; color: var(--muted); }

/* ===== Gallery ===== */
/* Two rows of photos at one height (their widths follow the photos). The rows scroll sideways by
   themselves (app.js), by touch or by dragging; the scrollbar is hidden. */
.gallery { background: var(--ink-900); }
/* Centred head as on sushi.live: "La galleria" and "Moments at Live" with "at Live" in gold. */
.gallery-head { display: grid; justify-items: center; gap: var(--s3); margin-bottom: var(--s6); text-align: center; }
.gallery-head h2 span { color: var(--gold-400); }
.gallery-rows { display: grid; gap: var(--s2); }
.gallery-row { overflow-x: auto; overscroll-behavior-x: contain; padding-block: 6px; scrollbar-width: none; cursor: grab; }
.gallery-row::-webkit-scrollbar { display: none; }
.gallery-row.is-dragging { cursor: grabbing; }
.gallery-track { display: flex; gap: var(--s3); width: max-content; padding-inline: var(--gutter); }
.gallery-item { flex: none; padding: 0; border: 0; border-radius: var(--r-md); background: var(--ink-700); cursor: zoom-in; }
.gallery-item img { width: auto; max-width: none; height: clamp(180px, 12vw + 130px, 300px); border-radius: inherit; object-fit: cover; -webkit-user-drag: none; user-select: none; }
.gallery-item:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
@media (hover: hover) {
  .gallery-row:hover .gallery-item:not(:hover) img { opacity: .6; }
}
/* Lightbox: the photo, its name and its number; close, previous, next. */
.lightbox { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: calc(var(--s8) + 8px) var(--gutter) calc(var(--s8) + 16px); border: 0; background: rgb(15 14 11 / .96); color: var(--ivory-50); }
.lightbox[open] { display: grid; place-items: center; }
.lightbox::backdrop { background: rgb(15 14 11 / .7); }
.lightbox-figure { display: grid; justify-items: center; gap: var(--s3); margin: 0; }
/* The photo leaves room for the padding and a caption of up to three lines, so the dialog never scrolls. */
.lightbox-image { width: auto; max-width: min(100%, 600px); height: auto; max-height: min(70vh, 100vh - 2 * var(--s8) - 24px - 6rem); max-height: min(70dvh, 100dvh - 2 * var(--s8) - 24px - 6rem); border-radius: var(--r-lg); }
.lightbox-figure figcaption { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s1) var(--s3); text-align: center; }
.lightbox-caption { font-weight: 600; }
.lightbox-count { color: var(--gold-400); font-variant-numeric: tabular-nums; }
.lightbox .icon-button { position: absolute; color: var(--ivory-50); background: var(--ink-800); }
.lightbox-close { top: var(--s4); right: var(--gutter); }
.lightbox-prev, .lightbox-next { bottom: var(--s5); }
.lightbox-prev { left: var(--gutter); }
.lightbox-next { right: var(--gutter); }
html:has(.lightbox[open]) { overflow: hidden; }
/* Short screens (phones on their side): less padding, the arrows at the sides. */
@media (max-height: 500px) {
  .lightbox { padding-block: var(--s4); }
  .lightbox-image { max-height: calc(100vh - 2 * var(--s4) - 3.5rem); max-height: calc(100dvh - 2 * var(--s4) - 3.5rem); }
  .lightbox-close { top: var(--s3); }
  .lightbox-prev, .lightbox-next { top: 50%; bottom: auto; translate: 0 -50%; }
}

/* ===== Events and take-away ===== */
.services { padding-block: clamp(2.5rem, 2rem + 2vw, 4rem); }
.services-grid { display: grid; gap: var(--s4); }
.service-card { display: grid; grid-template-rows: auto 1fr; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.service-photo { position: relative; }
.service-photo img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
/* Take-away: three tall tempura prawns. The tails stay in the wide frame on phones, the three prawns in the narrow
   one beside the text. */
#takeaway .service-photo img { object-position: 70% 5%; }
.service-icon { display: grid; flex: none; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--ink-800); color: var(--gold-400); }
.service-photo .service-icon { position: absolute; bottom: -22px; left: 20px; box-shadow: 0 0 0 4px var(--surface); }
.service-icon .icon { width: 24px; height: 24px; }
.service-body { display: grid; align-content: start; justify-items: start; gap: var(--s2); padding: var(--s6) 20px 20px; }
.service-card p { color: var(--muted); }

/* ===== FAQ ===== */
.faq-layout { display: grid; gap: var(--s5); }
.faq-list { border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); min-height: 56px; padding-block: var(--s3); font: 600 1rem/1.4 var(--font-body); list-style: none; cursor: pointer; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary:hover .faq-toggle { border-color: var(--accent); }
.faq-toggle { display: grid; flex: none; place-items: center; width: 32px; height: 32px; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--accent); }
.faq-toggle .icon { width: 16px; height: 16px; }
.plus-v { transform-box: fill-box; transform-origin: center; }
details[open] .faq-toggle { border-color: var(--gold-400); background: var(--gold-400); color: var(--ink-800); }
details[open] .plus-v { transform: scaleY(0); }
.faq-answer { max-width: 46ch; padding-bottom: var(--s5); color: var(--muted); }
.faq-actions { display: flex; flex-wrap: wrap; gap: 0 var(--s5); margin-top: var(--s2); color: var(--text); }
.faq-help { color: var(--muted); }
.faq-help .text-link { color: var(--text); }

/* ===== Visit ===== */
.visit .section-head { margin-bottom: var(--s5); }
.visit-layout { display: grid; gap: var(--s5); }
.visit-info { display: grid; gap: var(--s2); }
.visit-info address { display: flex; gap: var(--s3); font-size: var(--fs-lead); font-weight: 600; line-height: 1.4; }
.visit-info .icon { width: 22px; height: 22px; margin-top: 1px; color: var(--accent); }
.visit-facts { display: grid; gap: var(--s2); max-width: 48ch; color: var(--muted); text-wrap: pretty; }
.visit-facts li { display: flex; align-items: flex-start; gap: var(--s3); }
.visit-facts li:has(.text-link) { align-items: center; }
.visit-facts .text-link { color: var(--text); }
.hours-card { padding: 20px; border-radius: var(--r-lg); background: var(--surface); }
.hours-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2) var(--s3); margin-bottom: var(--s2); }
.hours-list { display: grid; font-variant-numeric: tabular-nums; }
.hours-list div { display: flex; justify-content: space-between; gap: var(--s3); margin-inline: calc(-1 * var(--s3)); padding: 6px var(--s3); border-bottom: 1px solid var(--line); }
.hours-list dd { white-space: nowrap; }
.hours-list .is-closed { color: var(--muted); }
.hours-list .is-today { border-color: transparent; border-radius: var(--r-sm); background: var(--today); color: var(--text); font-weight: 600; }
.today-label { margin-left: 6px; color: var(--gold-700); font: 600 .75rem/1 var(--font-body); letter-spacing: .06em; text-transform: uppercase; }
.hours-note { max-width: 46ch; margin-top: var(--s4); color: var(--muted); }
.visit-actions { display: grid; gap: var(--s3); margin-top: var(--s5); }
.visit-actions > .text-link { justify-self: start; }
.map-panel { position: relative; overflow: hidden; height: clamp(170px, 44vw, 340px); border-radius: var(--r-lg); background: var(--ivory-200); }
.map-panel iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.map-placeholder { position: absolute; bottom: var(--s4); left: var(--s4); display: flex; align-items: center; gap: var(--s2); font-weight: 600; }
.map-placeholder .icon { color: var(--accent); }

/* ===== Legal pages and 404 ===== */
.legal-hero { padding-block: var(--s7); }
.back-link { color: var(--muted); font-weight: 500; text-decoration: none; }
.back-link:hover, .legal-index a:hover { color: var(--text); }
.legal-hero .overline { margin-top: var(--s5); }
.legal-hero h1 { max-width: 20ch; margin-top: var(--s3); }
.legal-intro, .legal-date, .legal-contact p { color: var(--muted); }
.legal-intro { max-width: 60ch; margin-top: var(--s4); font-size: var(--fs-lead); line-height: 1.5; }
.legal-date { margin-top: var(--s4); font-size: var(--fs-meta); }
.legal-layout { display: grid; gap: var(--s6); }
.legal-index h2, .legal-article h2 { margin-bottom: var(--s2); }
.legal-index a { display: flex; align-items: center; min-height: 44px; padding-block: var(--s2); border-bottom: 1px solid var(--line); color: var(--muted); }
.legal-article { display: grid; gap: var(--s6); max-width: 72ch; }
.legal-article p + p { margin-top: var(--s3); }
.provider-links { display: flex; flex-wrap: wrap; gap: 0 var(--s5); }
.legal-contact { padding: var(--s5); border-radius: var(--r-lg); background: var(--surface); }
.not-found { min-height: 60vh; padding-block: var(--s9); }
.not-found h1 { max-width: 18ch; margin-top: var(--s4); }
.not-found-links { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s6); }

/* ===== Footer ===== */
.site-footer { padding-bottom: calc(var(--bar-h) + var(--s3)); background: var(--ink-900); color: var(--ivory-50); }
.site-footer > .wrap { padding-top: var(--s7); }
.footer-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "brand brand" "hours hours" "contact explore"; gap: var(--s5); }
.footer-brand { display: grid; grid-area: brand; align-content: start; justify-items: start; gap: var(--s2); color: var(--muted); }
.footer-brand .brand { color: var(--text); }
.footer-brand .footer-link { margin-top: -6px; }
.footer-brand .brand { margin-bottom: var(--s1); }
/* Invitation to book on the night photo of the sushi boat (full width, dark gradient at the bottom), then the
   reference columns. */
.footer-cta { position: relative; display: grid; align-items: end; min-height: clamp(420px, 34vw + 220px, 640px); overflow: hidden; isolation: isolate; }
/* Beyond 1920 px the band keeps the 1920 crop instead of showing less and less of the boat. */
@media (min-width: 1921px) { .footer-cta { min-height: 33.33vw; } }
.footer-cta-media, .footer-cta-media img { position: absolute; inset: 0; width: 100%; height: 100%; }
.footer-cta-media img { object-fit: cover; object-position: 55% 45%; }
.footer-cta::after { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, rgb(15 14 11 / .15) 0%, rgb(15 14 11 / .6) 40%, rgb(15 14 11 / .92) 70%, var(--ink-900) 100%); }
.footer-cta-inner { position: relative; z-index: 1; display: grid; gap: var(--s5); padding-block: var(--s8) var(--s7); }
.site-footer .footer-cta-title { margin: 0; color: var(--ivory-50); font: 600 clamp(2.25rem, 1.2rem + 4.2vw, 4.5rem)/1 var(--font-display); letter-spacing: -.04em; text-transform: none; }
.footer-cta p { margin-top: var(--s2); color: var(--ivory-50); font-size: var(--fs-lead); }
.footer-cta-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s5); }
.footer-cta-actions .text-link { color: var(--text); }
/* The brand motto as a large signature across the footer (decorative: aria-hidden). */
/* Sized to span the content width: the phrase measures ≈ 5.5 em (≈ 5.9 em at phone sizes). */
.footer-motto { margin-top: var(--s7); overflow: hidden; color: var(--gold-400); font: 600 calc((100vw - 2 * var(--gutter)) / 5.95)/.88 var(--font-display); letter-spacing: -.055em; white-space: nowrap; }
@media (min-width: 600px) { .footer-motto { font-size: calc(min(100vw - 2 * var(--gutter), var(--max)) / 5.55); } }
.footer-motto span { margin-left: .02em; margin-right: .06em; }
.site-footer h2 { margin-bottom: var(--s2); }
.footer-hours { grid-area: hours; color: var(--muted); }
.footer-hours div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 var(--s3); padding-block: 3px; }
.footer-hours dt { color: var(--text); }
.footer-contact { grid-area: contact; }
.footer-explore { grid-area: explore; }
.footer-links { min-width: 0; }
.footer-link, .footer-policies a, .footer-langs a { color: var(--muted); }
.footer-link:hover, .footer-policies a:hover, .footer-policies a[aria-current], .footer-langs a:not([aria-current]):hover { color: var(--text); }
.footer-meta { display: grid; gap: var(--s3); margin-top: var(--s6); padding-top: var(--s4); border-top: 1px solid var(--line); }
.footer-policies { display: flex; flex-wrap: wrap; gap: 0 var(--s4); }
.footer-policies a { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--fs-meta); }
.footer-langs a { border-color: transparent; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s2) var(--s5); margin-top: var(--s4); color: var(--muted); font-size: var(--fs-meta); }
.design-credit strong { color: var(--text); font-weight: 600; }

/* ===== /ordina: the page behind the QR code on the tables ===== */
/* One narrow column, like a menu card: the all-you-can-eat card with its steps and the order button, then à la carte. */
.table-page { padding-block: var(--s6) var(--s8); }
.table-wrap { display: grid; gap: var(--s5); max-width: 40rem; }
.table-intro { display: grid; justify-items: start; gap: var(--s3); }
.table-intro h1 { font-size: clamp(2.25rem, 1.7rem + 2.2vw, 3.25rem); }
.table-lead { color: var(--muted); font-size: var(--fs-lead); line-height: 1.5; }
.table-card { display: grid; gap: var(--s4); padding: var(--s5) 20px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.table-ayce { border-color: rgb(217 179 108 / .5); }
.table-card h2 { font-size: clamp(1.625rem, 1.4rem + 1vw, 2rem); line-height: 1.1; letter-spacing: -.03em; }
.table-card-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s2) var(--s4); }
.table-price { display: flex; align-items: baseline; gap: 6px; color: var(--accent); white-space: nowrap; }
.table-currency { align-self: flex-start; margin-top: .35em; font: 600 1rem/1 var(--font-display); }
.table-price strong { font: 600 3rem/.9 var(--font-display); letter-spacing: -.045em; }
.table-per { color: var(--muted); font-size: var(--fs-meta); }
.table-text { color: var(--muted); }
.table-facts { display: grid; gap: var(--s2); }
.table-facts li { display: flex; align-items: flex-start; gap: var(--s2); font-weight: 500; }
.table-facts .icon { flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--accent); }
.table-steps-title { margin-top: var(--s2); font-size: 1.125rem; }
.table-steps .step-number, .table-steps li:first-child .step-number { border-color: var(--accent); background: none; color: var(--accent); }
.table-actions { display: grid; gap: var(--s3); margin-top: var(--s2); }
.table-actions .button { width: 100%; }
.table-hint { color: var(--muted); font-size: var(--fs-meta); text-align: center; }
.table-actions .text-link { justify-self: center; }
.table-note { display: flex; gap: var(--s3); padding: var(--s4); border-radius: var(--r-md); background: rgb(217 139 106 / .1); }
.table-note .icon { flex: none; width: 22px; height: 22px; color: var(--dot-closed); }
.table-note h3 { font: 600 1rem/1.4 var(--font-body); }
.table-note p { margin-top: 2px; color: var(--muted); font-size: var(--fs-meta); }
.table-carta .button { justify-self: start; }
.table-footer { padding-bottom: var(--s6); }
.table-footer-address { color: var(--muted); }
.table-footer-address strong { color: var(--text); font-weight: 600; }

/* ===== Sticky mobile booking bar ===== */
.mobile-book { position: fixed; right: 0; bottom: 0; left: 0; z-index: 25; display: flex; align-items: center; gap: 10px; min-height: var(--bar-h); padding: var(--s2) var(--gutter) max(var(--s2), env(safe-area-inset-bottom)); border-top: 1px solid var(--line-dark); background: var(--ink-800); visibility: hidden; transform: translateY(100%); }
.mobile-book.is-visible { visibility: visible; transform: none; }
.mobile-book-text { flex: 1; min-width: 0; color: var(--muted); font: 500 var(--fs-meta)/1.25 var(--font-body); }
.mobile-book-text strong { display: block; color: var(--text); font: 600 1rem/1.25 var(--font-body); }
.mobile-book .button { padding-inline: 20px; }
/* Tabbing never leaves the focused link hidden behind the bar. */
@media (max-width: 1023px) {
  main :is(a, button, summary, [tabindex]), .site-footer :is(a, button) { scroll-margin-bottom: calc(var(--bar-h) + var(--s4)); }
}

/* ===== Breakpoints ===== */
@media (max-width: 359px) {
  .site-header .brand span { display: none; }
  .hours-card { padding: var(--s4); }
  .hero-secondary .button, .button-pair .button, .review-links .button { padding-inline: var(--s2); }
  .hero-actions > .button { padding-inline: var(--s4); }
  /* The sticky bar stays one row high (the footer reserves --bar-h): no price line. */
  .mobile-book-text span { display: none; }
  /* One column, so the phone number and the e-mail address keep a line each. */
  .footer-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "brand" "hours" "contact" "explore"; }
}
/* Small phones: the live status fits one line for the usual texts (it may wrap without shifting the hero),
   and the sticky bar keeps one row with a tighter button (the German price line wrapped at 360 px). */
@media (max-width: 399px) {
  .hero-status .open-status { font-size: .8125rem; }
  .mobile-book { gap: var(--s2); }
  .mobile-book .button { padding-inline: 14px; }
}
/* Short phone screens (360 × 640, Safari with toolbars): a lower photo, and the lead sentence moves
   below the buttons so the booking button stays in the first screen. */
@media (max-width: 1023px) and (max-height: 740px) {
  .hero-image { min-height: 150px; max-height: 28vh; max-height: 28svh; }
  .hero-copy { display: flex; flex-direction: column; }
  .hero-lead { order: 1; margin-top: var(--s4); }
}
/* Very short phone screens (320 × 568): a lower photo still. */
@media (max-width: 1023px) and (max-height: 600px) {
  .hero-image { min-height: 128px; max-height: 24vh; max-height: 24svh; }
  .hero-actions { margin-top: var(--s4); }
}
/* Phones on their side (667 × 375, 844 × 390): the hero goes side by side as on desktop, and the booking button
   moves into the header instead of the bottom bar, which would take a sixth of the screen. */
@media (max-width: 1023px) and (max-height: 500px) and (orientation: landscape) {
  .hero-inner { grid-template-areas: "copy media"; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; column-gap: var(--s5); width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; padding-block: var(--s4) var(--s5); }
  .hero-copy { width: auto; padding-top: 0; }
  .hero-copy > .overline { display: none; }
  .hero h1 { margin-top: var(--s3); font-size: 2.25rem; }
  .hero-image { aspect-ratio: 4 / 3; min-height: 0; max-height: none; border-radius: var(--r-lg); }
  .seal { right: var(--s3); bottom: var(--s3); }
  .header-book { display: inline-flex; min-height: 44px; padding: 8px 16px; font-size: .9375rem; }
  .header-book .label-long, .mobile-book { display: none; }
  .site-footer { padding-bottom: var(--s6); }
  .service-photo img { max-height: 40vh; max-height: 40svh; }
}
@media (min-width: 600px) {
  .offer-slides-track { grid-auto-columns: calc((100% - var(--s4)) / 2); }
  .hero-facts { font-size: var(--fs-lead); }
  .review-skeleton { grid-auto-columns: calc((100% - var(--s3)) / 2); }
  /* Two per row: one per row drew the 380 px photos up to 704 px wide. */
  .services-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 660px) {
  .review-label { position: static !important; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; }
  .review-platform { display: none; }
}
/* Tablets: the booking buttons stay about as wide as the text above them. */
@media (min-width: 600px) and (max-width: 1023px) {
  .hero-actions { max-width: 36rem; }
}
@media (min-width: 768px) {
  .dish-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s5); }
  .dish { display: block; }
  .dish-tag { margin-top: var(--s3); }
  .room-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; padding: 0; overflow: visible; }
  .cocktail { grid-template-columns: 240px minmax(0, 1fr); align-items: center; gap: var(--s6); padding: var(--s5); }
  .lightbox-prev, .lightbox-next { top: 50%; bottom: auto; translate: 0 -50%; }
  .cocktail img { grid-row: auto; }
  .cocktail-copy { display: grid; justify-items: start; gap: var(--s2); }
  .cocktail .overline, .cocktail h3, .cocktail-copy > p:not(.overline), .cocktail-copy > a, .cocktail-copy > .cocktail-virgin { grid-column: auto; align-self: auto; }
  .cocktail-copy > p:not(.overline) { margin-top: 0; }
  .service-icon { width: 52px; height: 52px; }
  .service-photo .service-icon { bottom: -26px; }
  .review-skeleton { grid-auto-columns: calc((100% - 2 * var(--s3)) / 3); }
  /* Offer: head, steps and the photo pair on the left, the card on the right. */
  .offer-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto 1fr; align-items: start; column-gap: clamp(1.5rem, 5vw, 5rem); row-gap: var(--s7); }
  .offer-head { grid-area: 1 / 1; }
  .offer-how { grid-area: 2 / 1; }
  .offer-slides { grid-area: 3 / 1; align-self: end; }
  .offer-card { grid-area: 1 / 2 / span 3; }
  /* Visit: hours card on the left; address, then the map on the right. */
  .visit-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); grid-template-areas: "card info" "card map"; grid-template-rows: auto 1fr; }
  .hours-card { grid-area: card; }
  .visit-info { grid-area: info; }
  .map-panel { grid-area: map; height: auto; min-height: 320px; }
  .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: "brand brand brand" "hours contact explore"; }
  .footer-hours div { display: block; }
}
@media (min-width: 1024px) {
  :root { --header-h: 76px; --r-top: 32px; }
  .header-inner { height: 76px; }
  .brand span { font-size: .8125rem; letter-spacing: .16em; }
  .primary-nav { display: flex; align-items: center; gap: clamp(1rem, 2vw, 1.75rem); }
  .primary-nav a { position: relative; display: inline-flex; align-items: center; gap: var(--s1); min-height: 44px; font-size: .9375rem; font-weight: 500; }
  .primary-nav a::after { content: ""; position: absolute; right: 0; bottom: 8px; left: 0; height: 1px; background: var(--gold-400); transform: scaleX(0); transform-origin: left; }
  .primary-nav a:hover::after { transform: scaleX(1); }
  .primary-nav .icon { width: 16px; height: 16px; color: var(--muted); }
  .header-actions { gap: var(--s3); }
  .header-call, .menu-toggle, .mobile-book { display: none; }
  .header-book { display: inline-flex; min-height: 44px; padding: 8px 20px; font-size: .9375rem; }
  .header-book .label-long { display: none; }
  .mobile-menu { display: none !important; }
  .hero-inner { grid-template-areas: "copy media"; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: center; column-gap: clamp(2rem, 4vw, 4rem); width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; padding-block: var(--s7) var(--s8); }
  .hero-copy { width: auto; padding-top: 0; }
  .hero-image { aspect-ratio: 4 / 3; max-height: none; border-radius: var(--r-lg); }
  .seal { right: auto; bottom: 40px; left: -40px; width: 132px; box-shadow: 0 0 0 6px var(--ink-800), var(--shadow-float); }
  .seal-per { font-size: .75rem; }
  .seal strong { font-size: 3rem; }
  .hero-actions { display: flex; flex-wrap: wrap; align-items: center; }
  .hero-actions > .button { width: auto; }
  .offer-layout { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
  /* Events and take-away: photo on the left, text on the right. */
  .service-card { grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); grid-template-rows: none; }
  .service-photo img { height: 100%; min-height: 280px; aspect-ratio: auto; }
  .service-photo .service-icon { top: var(--s5); right: -26px; bottom: auto; left: auto; }
  .service-body { align-content: center; padding: var(--s6) var(--s5) var(--s6) var(--s7); }
  .cocktail { grid-template-columns: 320px minmax(0, 1fr); }
  .offer-body { padding: var(--s6); }
  .reviews-head { grid-template-columns: 1fr auto; align-items: end; }
  .split-head { grid-template-columns: 1fr 1fr; align-items: end; column-gap: var(--s7); }
  .faq-layout { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); grid-template-rows: auto 1fr; column-gap: var(--s8); align-items: start; }
  .faq-layout > h2 { grid-area: 1 / 1; }
  .faq-help { grid-area: 2 / 1; }
  .faq-list { grid-area: 1 / 2 / span 2; }
  .faq-list summary { min-height: 64px; font-size: 1.0625rem; }
  .visit-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
  .hours-card { padding: var(--s6); }
  .map-panel { min-height: 380px; }
  .legal-layout { grid-template-columns: 260px minmax(0, 1fr); align-items: start; gap: var(--s8); }
  .legal-index { position: sticky; top: calc(var(--header-h) + var(--s5)); }
  .site-footer { padding-bottom: var(--s6); }
  .footer-grid { grid-template-columns: 1.3fr 1fr 1fr 1fr; grid-template-areas: "brand hours contact explore"; }
  .footer-meta { grid-template-columns: 1fr auto; align-items: center; }
  .footer-cta-inner { grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: var(--s7); }
  .footer-cta::after { background: linear-gradient(90deg, rgb(15 14 11 / .85) 0%, rgb(15 14 11 / .45) 55%, rgb(15 14 11 / .2) 100%), linear-gradient(180deg, rgb(15 14 11 / 0) 60%, var(--ink-900) 100%); }
}
/* Up to 1279 px the IT and ES titles would take three lines in a narrower text column. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .hero-inner { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
}
@media (min-width: 1280px) {
  .header-book .label-short { display: none; }
  .header-book .label-long { display: inline; }
}

/* ===== Motion: only for visitors who have not asked for less ===== */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .button, .icon-button, .lang-pills a, .footer-langs a { transition: background-color var(--dur-1), border-color var(--dur-1), color var(--dur-1); }
  .button:active { transform: translateY(1px); }
  .lang-switch summary .icon, .faq-toggle, .plus-v { transition: transform var(--dur-2) var(--ease), background-color var(--dur-1), border-color var(--dur-1); }
  .primary-nav a::after { transition: transform var(--dur-2) var(--ease); }
  .mobile-book { transition: transform var(--dur-2) var(--ease), visibility 0s linear var(--dur-2); }
  .mobile-book.is-visible { transition: transform var(--dur-2) var(--ease), visibility 0s; }
  .lang-popover, .mobile-menu { animation: fade-in var(--dur-1) ease-out; }
  .gallery-item img { transition: opacity var(--dur-2) ease-out; }
  .offer-slides-dots span::before { transition: width var(--dur-2) var(--ease), background-color var(--dur-1); }
  .lightbox[open] .lightbox-figure { animation: fade-in var(--dur-2) ease-out; }
  @media (hover: hover) {
    .dish img { transition: transform .4s var(--ease); }
    .dish:hover img { transform: scale(1.03); }
  }
}
@keyframes fade-in { from { opacity: 0; } }