/* 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%; scroll-padding-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; }
.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-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 .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; }
.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); }
.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; }
.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; }
/* Two sushi-roll squares, staggered like a small editorial spread (hidden on phones: the hero shows the roll). */
.offer-gallery { display: none; }
.offer-gallery img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-lg); }
.offer-gallery img:last-child { margin-top: var(--s7); }

/* ===== 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 container widths
   (measured: 473 px up to a 479 px viewport, 430 px from 480 px, 240 px from 692 px). */
.review-widget { position: relative; min-height: 473px; }
@media (min-width: 480px) { .review-widget { min-height: 430px; } }
@media (min-width: 692px) { .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 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: 52ch; 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); }
.restaurant-section { padding-top: 0; }
/* 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); }

/* ===== 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; }
.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-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: 65ch; 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); color: var(--muted); }
.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 .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 { 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-block: var(--s7) calc(var(--bar-h) + var(--s3)); background: var(--ink-900); color: var(--ivory-50); }
.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, then the reference columns. */
.footer-cta { display: grid; gap: var(--s5); margin-bottom: var(--s7); padding-bottom: var(--s7); border-bottom: 1px solid var(--line); }
.site-footer .footer-cta-title { margin: 0; color: var(--text); font: 600 var(--fs-h2)/1.05 var(--font-display); letter-spacing: -.035em; text-transform: none; }
.footer-cta p { margin-top: var(--s2); color: var(--muted); 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.4 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.42); } }
.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; }

/* ===== 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 (the header keeps scroll-padding-top). */
@media (max-width: 1023px) {
  html { scroll-padding-bottom: calc(var(--bar-h) + var(--s4)); }
}

/* ===== Reopening landing ===== */
/* Full-height photo hero: the countdown and the actions sit on a dark gradient at the bottom. */
.comeback-hero { position: relative; display: grid; align-items: end; min-height: calc(100vh - var(--header-h)); min-height: calc(100svh - var(--header-h)); overflow: hidden; isolation: isolate; background: var(--ink-900); color: var(--ivory-50); }
.comeback-media, .comeback-media img { position: absolute; inset: 0; width: 100%; height: 100%; }
.comeback-media img { object-fit: cover; object-position: 50% 45%; }
.comeback-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(15 14 11 / .5) 0%, rgb(15 14 11 / .3) 28%, rgb(15 14 11 / .82) 62%, var(--ink-900) 100%); }
.comeback-inner { position: relative; z-index: 1; display: grid; justify-items: start; gap: var(--s4); padding-block: var(--s8) var(--s7); }
/* The title also follows the screen height, so the countdown stays in the first screen of a laptop. */
.comeback-hero h1 { max-width: 11ch; font-size: clamp(2.75rem, 1.3rem + 6.2vw, 6.75rem); font-size: clamp(2.75rem, min(1.3rem + 6.2vw, 12vh), 6.75rem); font-size: clamp(2.75rem, min(1.3rem + 6.2vw, 12svh), 6.75rem); line-height: .95; letter-spacing: -.045em; text-wrap: balance; }
.comeback-tagline { display: flex; align-items: center; gap: var(--s3); color: var(--gold-400); font: 600 clamp(1.5rem, 1.1rem + 2vw, 2.75rem)/1 var(--font-display); letter-spacing: -.02em; }
.comeback-tagline::before { content: ""; width: clamp(28px, 4vw, 56px); height: 1px; background: currentColor; }
.comeback-lead { max-width: 46ch; color: rgb(245 240 230 / .88); font-size: var(--fs-lead); }
/* The countdown keeps its space from the first paint and fades in once app.js has filled it. */
.countdown { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s2); width: min(100%, 580px); margin-top: var(--s2); opacity: 0; }
.countdown.is-live { opacity: 1; }
.countdown-unit { display: grid; justify-items: center; gap: 4px; padding: var(--s3) 2px; border: 1px solid rgb(245 240 230 / .18); border-radius: var(--r-md); background: rgb(15 14 11 / .6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.countdown-value { font: 600 clamp(2rem, 1.3rem + 3vw, 3.75rem)/1 var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
/* Sentence case on phones: "Sekunden", "Segundos" and "Secondes" fit a 64 px box at 320 px. */
.countdown-label { color: var(--muted-on-dark); font-size: .75rem; font-weight: 600; letter-spacing: .01em; }
/* From the reopening moment (app.js): "we're back" replaces the countdown and the future-tense lines. */
.is-reopened .comeback-tagline, .is-reopened .comeback-lead { display: none; }
.comeback-open { color: var(--gold-300); font: 600 clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem)/1.15 var(--font-display); }
.comeback-date { display: inline-flex; align-items: center; gap: var(--s2); font-weight: 600; }
.comeback-date .icon { width: 20px; height: 20px; color: var(--gold-400); }
.comeback-actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s2); }
.comeback-actions .button { flex: 1 1 auto; }
/* Summer at Live Capo Vaticano: two staggered photos and the story. */
.summer-layout { display: grid; gap: var(--s6); align-items: center; }
.summer-photos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); align-items: start; }
.summer-photos figure { position: relative; }
.summer-photos img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--r-lg); }
.summer-photos figure:last-child { margin-top: var(--s7); }
.summer-photos figcaption { position: absolute; bottom: var(--s3); left: var(--s3); padding: 4px 12px; border-radius: var(--r-pill); background: rgb(15 14 11 / .72); color: var(--ivory-50); font-size: .8125rem; font-weight: 600; }
.summer-copy { display: grid; justify-items: start; gap: var(--s4); }
.summer-copy p { max-width: 52ch; color: var(--muted); font-size: var(--fs-lead); }
/* What's waiting: the room cards plus a compact hours band. */
.waiting-hours { margin-top: var(--s7); padding: 20px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--ink-700); }
.waiting-hours h3 { margin-bottom: var(--s3); font-size: var(--fs-h3); }
.waiting-hours dl { display: grid; column-gap: var(--s6); }
.waiting-hours div { display: flex; justify-content: space-between; gap: var(--s3); padding-block: var(--s2); border-bottom: 1px solid var(--line); }
.waiting-hours div:last-child { border-bottom: 0; }
.waiting-hours dt { font-weight: 600; }
.waiting-hours dd { color: var(--muted); }
/* Stay tuned: the Instagram handle, then every way to reach the restaurant. */
.stay-layout { display: grid; gap: var(--s6); }
.stay-copy { display: grid; justify-items: start; gap: var(--s4); }
.stay-copy p { max-width: 46ch; color: var(--muted); font-size: var(--fs-lead); }
.insta-handle { display: inline-flex; align-items: center; gap: var(--s3); max-width: 100%; min-height: 44px; color: var(--accent); font: 600 clamp(1.5rem, .9rem + 3.2vw, 3.5rem)/1.1 var(--font-display); letter-spacing: -.03em; }
.insta-handle span { min-width: 0; overflow-wrap: anywhere; }
.insta-handle .icon { flex: none; width: 1em; height: 1em; }
.insta-handle:hover span { text-decoration: underline 2px; text-underline-offset: 6px; }
.stay-contacts { align-content: start; gap: var(--s4); padding: 20px; border-radius: var(--r-lg); background: var(--surface); }
.stay-contacts .icon { flex: none; width: 22px; height: 22px; margin-top: 2px; color: var(--accent); }
.stay-contacts strong { color: var(--text); }

/* ===== Breakpoints ===== */
@media (max-width: 359px) {
  .site-header .brand span { display: none; }
  .hours-card { padding: var(--s4); }
  .hero-secondary .button, .button-pair .button { padding-inline: var(--s2); }
  /* The sticky bar stays one row high (the footer reserves --bar-h): no price line, tighter button. */
  .mobile-book { gap: var(--s2); }
  .mobile-book .button { padding-inline: 14px; }
  .mobile-book-text span { display: none; }
  .countdown { gap: var(--s1); }
  .countdown-label { letter-spacing: 0; }
}
/* Small phones: the live status fits one line for the usual texts (it may wrap without shifting the hero). */
@media (max-width: 399px) {
  .hero-status .open-status { font-size: .8125rem; }
  /* The sticky bar stays one row high at 360 px, also with the longest German labels. */
  .mobile-book { gap: var(--s2); }
  .mobile-book-text { font-size: .8125rem; }
  .mobile-book-text strong { font-size: .9375rem; }
}
/* 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); }
  .comeback-inner { padding-block: var(--s6); }
  .comeback-lead { order: 1; }
}
@media (min-width: 600px) {
  .countdown-label { letter-spacing: .08em; text-transform: uppercase; }
  .offer-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); align-items: start; }
  .hero-facts { font-size: var(--fs-lead); }
  .review-skeleton { grid-auto-columns: calc((100% - var(--s3)) / 2); }
  .review-label { position: static !important; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; }
  .review-platform { display: none; }
}
@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; }
  .waiting-hours dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .services-grid { grid-template-columns: 1fr 1fr; }
  .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-gallery { 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, .85fr) minmax(0, 1.15fr); 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(--s6) var(--s6) var(--s7); }
  .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 { grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: var(--s7); }
  /* Reopening landing */
  .comeback-hero::after { background: linear-gradient(90deg, rgb(15 14 11 / .88) 0%, rgb(15 14 11 / .62) 45%, rgb(15 14 11 / .15) 100%), linear-gradient(180deg, transparent 60%, rgb(15 14 11 / .7) 100%); }
  .comeback-hero { align-items: center; }
  .comeback-actions .button { flex: 0 0 auto; }
  .summer-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--s8); }
  .waiting-hours { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: var(--s7); padding: var(--s5) var(--s6); }
  .waiting-hours h3 { margin: 0; }
  .waiting-hours dl { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .waiting-hours div { display: grid; gap: 2px; padding: 0; border: 0; }
  .stay-layout { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; column-gap: var(--s8); }
  .stay-contacts { padding: var(--s6); }
}
@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; }
  .countdown { transition: opacity 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; } }