/* Epiphany design system.
   Taken off the house's own mark: a cream copperplate word on red velvet, a
   single thin rule under it, then RESTAURANT & LOUNGE in spaced capitals. The
   site is that velvet, that cream and that rule. One idea carries everything:
   the epiphany itself, a light coming up in a dark room. Every section arrives
   out of the dark by sharpening rather than sliding, titles sit in a soft
   halo, and the only decoration is a hairline, never a box, never a shadow
   with an edge.

   Type: Laviossa for titles (a high-contrast fashion serif with the same
   swelling strokes as the script in the logo), Butler for the carte and the
   longer reading, Cocogoose for labels, prices, hours and buttons: the
   geometric spaced capitals under the rule. All three self-hosted from dafont, see
   docs/CREDITS.md for the licences. */

@font-face { font-family: 'Laviossa'; src: url('/fonts/laviossa-medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Butler'; src: url('/fonts/butler-light.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Butler'; src: url('/fonts/butler-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Butler'; src: url('/fonts/butler-medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Butler'; src: url('/fonts/butler-bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
/* Cocogoose is a trial build: its ten figures and its percent sign are all the
   same placeholder glyph, so every price and every hour would print as the
   same mark. The family is therefore declared twice. The Cocogoose files cover
   everything EXCEPT U+0030-0039 and U+0025, and a small figures-only face
   covers exactly those. Nothing else in the site has to know. Deleting the
   unicode-range lines is what a licensed build of Cocogoose would allow. */
@font-face { font-family: 'Cocogoose'; src: url('/fonts/cocogoose-light.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; unicode-range: U+0000-0024, U+0026-002F, U+003A-10FFFF; }
@font-face { font-family: 'Cocogoose'; src: url('/fonts/cocogoose-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-0024, U+0026-002F, U+003A-10FFFF; }
@font-face { font-family: 'Cocogoose'; src: url('/fonts/cocogoose-bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0000-0024, U+0026-002F, U+003A-10FFFF; }
@font-face { font-family: 'Cocogoose'; src: url('/fonts/figures-book.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; unicode-range: U+0025, U+0030-0039; }
@font-face { font-family: 'Cocogoose'; src: url('/fonts/figures-book.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0025, U+0030-0039; }
@font-face { font-family: 'Cocogoose'; src: url('/fonts/figures-heavy.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0025, U+0030-0039; }

:root {
  --velvet: #3a0c14;        /* the velvet of the logo: the page ground */
  --velvet-deep: #24070d;   /* the same after closing: night bands, footer */
  --velvet-lit: #4d1019;    /* a step up: panels, hover, inputs */
  --velvet-glow: #6b1a26;   /* the centre of a halo */
  --champagne: #e9d8a6;     /* the cream of the lettering: titles, rules, prices */
  --champagne-lit: #f7ecc7; /* the same caught by light: hover */
  --champagne-dim: rgba(233, 216, 166, 0.62);
  --cream: #f3e9d8;         /* the reading colour on velvet */
  --cream-dim: rgba(243, 233, 216, 0.66);
  --line: rgba(233, 216, 166, 0.22);
  --line-soft: rgba(233, 216, 166, 0.12);

  /* The carte and the hours are printed things: they sit on ivory card with
     the velvet as ink and a deeper gold for the prices. */
  --ivory: #f4ecdc;
  --ivory-2: #ebe1cc;
  --ink: #2a0a10;
  --ink-soft: #5b3a40;
  --para: #5b4a4c;
  --brass: #8a6a2a;         /* gold for labels and rules on ivory */
  /* Measured, not assumed: #8a6a2a comes out at 4.28:1 on the ivory and
     4.43:1 inside a price tag's paler well, both of which are under the 4.5
     a price printed at 12px needs. This one clears it on either ground. */
  --brass-strong: #7d5e23;
  --rule-on-ivory: rgba(42, 10, 16, 0.18);
  --rule-on-ivory-soft: rgba(42, 10, 16, 0.1);

  --ok: #8fd0a4;
  --err: #f0a19b;
  --ok-on-ivory: #2f7a52;
  --err-on-ivory: #a33a34;
  --wa: #25d366;

  --display: 'Laviossa', 'Didot', 'Bodoni MT', Georgia, serif;
  --serif: 'Butler', 'Georgia', 'Times New Roman', serif;
  --sans: 'Cocogoose', 'Avenir Next', 'Segoe UI', system-ui, sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* The halo: a light coming up behind whatever sits in it */
  --halo: radial-gradient(ellipse 60% 55% at 50% 50%, rgba(233, 216, 166, 0.16), rgba(233, 216, 166, 0.05) 45%, transparent 72%);
  --halo-warm: radial-gradient(ellipse 70% 60% at 50% 40%, rgba(107, 26, 38, 0.9), rgba(58, 12, 20, 0.4) 50%, transparent 80%);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--velvet);
  color: var(--cream);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
::selection { background: var(--champagne); color: var(--velvet-deep); }
:focus-visible { outline: 1px solid var(--champagne); outline-offset: 4px; }
.hidden { display: none !important; }

/* ---------- Typography ---------- */
h1, h2, h3 { font-family: var(--display); font-weight: 500; color: var(--champagne); line-height: 1.06; letter-spacing: 0.005em; }

/* The line under the rule: spaced capitals in the label face, the way
   RESTAURANT & LOUNGE sits under the word in the logo. */
.kicker {
  display: block;
  font-family: var(--sans); font-weight: 300;
  font-size: 10.5px; letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--champagne-dim); line-height: 1.5;
}
.section-head.center .kicker { text-indent: 0.34em; }

/* The title, then the rule. The rule is drawn short and to the left, or
   centred under a centred title, and it is the one ornament on the page. */
.section-title {
  font-size: clamp(34px, 4vw, 58px);
  margin: 14px 0 0;
  max-width: 18ch;
  position: relative;
  padding-bottom: 26px;
}
.section-title::after {
  content: ''; position: absolute; left: 0; bottom: 0; width: 64px; height: 1px;
  background: var(--champagne-dim);
}
.section-head.center .section-title { max-width: none; }
.section-head.center .section-title::after { left: 50%; transform: translateX(-50%); }
.section-sub { color: var(--cream-dim); max-width: 60ch; margin-top: 20px; font-family: var(--serif); font-weight: 300; font-size: 18px; line-height: 1.65; }
.section-head.center .section-sub { max-width: 64ch; }
.serif { font-family: var(--display); }

/* ---------- Layout ---------- */
.container { width: min(1180px, 90vw); margin: 0 auto; }
section { padding: clamp(84px, 10vw, 150px) 0; position: relative; }
.section-head { margin-bottom: clamp(40px, 5vw, 64px); }
.section-head.center { text-align: center; }
.section-head.center .section-sub { margin-left: auto; margin-right: auto; }

/* ---------- Buttons ---------- */
/* A hairline around spaced capitals. Hover: the light comes up inside it,
   a wash of champagne rising from the bottom edge. Nothing lifts, nothing
   casts a shadow. */
/* A pill drawn in one hairline of champagne. The light rises inside it on
   hover, from the bottom edge to the top, and the label turns to velvet as it
   is covered. Nothing lifts and nothing casts a shadow: the glow around the
   pill is the only thing that grows. */
.btn {
  display: inline-block; position: relative; z-index: 0;
  padding: 16px 38px;
  border: 1px solid var(--champagne-dim); border-radius: 999px;
  background: linear-gradient(to top, var(--champagne) 50%, transparent 50%) no-repeat;
  background-size: 100% 202%; background-position: 0 0;
  color: var(--champagne);
  font-family: var(--sans); font-size: 11px; font-weight: 400;
  text-transform: uppercase; letter-spacing: 0.24em; text-indent: 0.24em; text-align: center;
  transition: background-position 0.6s var(--ease), color 0.45s var(--ease),
    border-color 0.45s var(--ease), box-shadow 0.6s var(--ease);
}
.btn:hover {
  background-position: 0 100%;
  color: var(--velvet-deep);
  border-color: var(--champagne);
  box-shadow: 0 0 0 1px rgba(233, 216, 166, 0.22), 0 10px 40px rgba(233, 216, 166, 0.16);
}
.btn.solid {
  background-color: var(--champagne);
  background-image: linear-gradient(to top, var(--champagne-lit) 50%, var(--champagne) 50%);
  color: var(--velvet-deep); border-color: var(--champagne);
}
.btn.solid:hover { background-position: 0 100%; color: var(--velvet-deep); }
.btn.ghost { background-image: linear-gradient(to top, var(--champagne) 50%, transparent 50%); border-color: var(--line); }
.btn:disabled { opacity: 0.45; pointer-events: none; }
.btn.danger { border-color: var(--err); color: var(--err); background-image: linear-gradient(to top, var(--err) 50%, transparent 50%); }
.btn.danger:hover { color: var(--velvet-deep); box-shadow: 0 0 0 1px rgba(240, 161, 155, 0.22), 0 10px 40px rgba(240, 161, 155, 0.16); }

/* ---------- The bands ---------- */
/* One long velvet evening. Bands part with a hairline that fades at both
   ends, never a hard edge. Two kinds of ground: the velvet, and the ivory
   the carte is printed on. */
section, footer { position: relative; }
section + section::before, footer::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 1px; z-index: 2;
  background: linear-gradient(90deg, transparent, var(--line) 20%, var(--line) 80%, transparent);
}
.hero::before, .hero + section::before { display: none; }

section.paper { background: var(--ivory); color: var(--para); }
.paper + section::before, section.paper::before {
  background: linear-gradient(90deg, transparent, var(--rule-on-ivory) 20%, var(--rule-on-ivory) 80%, transparent);
}
.paper .kicker { color: var(--brass); }
.paper .section-title, .paper h1, .paper h2, .paper h3 { color: var(--ink); }
.paper .section-title::after { background: var(--brass); }
.paper .section-sub, .paper p { color: var(--para); }
.paper .btn { border-color: var(--ink); color: var(--ink); background-image: linear-gradient(to top, var(--ink) 50%, transparent 50%); }
.paper .btn:hover { color: var(--ivory); }
.paper ::selection { background: var(--ink); color: var(--ivory); }

.night { background: var(--velvet-deep); }

/* ---------- Nav ---------- */
/* Over the film the bar is nothing but type. Once the page scrolls it is a
   band of velvet, blurred over what passes beneath, closed by a hairline. */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 60; padding: 22px 0; transition: background 0.5s, padding 0.5s, box-shadow 0.5s; }
.nav.scrolled {
  background: rgba(36, 7, 13, 0.86);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  padding: 12px 0;
  box-shadow: 0 1px 0 var(--line-soft);
}
.nav.menu-open, .nav.scrolled.menu-open { backdrop-filter: none; -webkit-backdrop-filter: none; background: transparent; box-shadow: none; }
.nav .container { width: min(1560px, 94vw); }
.nav-inner { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 26px; }
.nav-logo { justify-self: start; grid-column: 1; grid-row: 1; display: flex; align-items: center; }
.nav-logo img { height: 44px; width: auto; flex: none; transition: height 0.4s var(--ease); }
.nav.scrolled .nav-logo img { height: 38px; }
.nav-links { display: flex; gap: 30px; align-items: center; list-style: none; grid-column: 2; grid-row: 1; justify-content: center; }
.nav-right { display: flex; gap: 14px; align-items: center; justify-content: flex-end; grid-column: 3; grid-row: 1; list-style: none; }
.nav-links a, .nav-right a {
  font-family: var(--sans); font-size: 11px; font-weight: 400;
  text-transform: uppercase; letter-spacing: 0.22em; text-indent: 0.22em;
  color: var(--cream); opacity: 0.9;
  transition: opacity 0.35s, color 0.35s;
  position: relative; padding: 8px 0; display: inline-block;
}
/* The rule, in miniature, drawn under the word on hover */
.nav-links a::after {
  content: ''; position: absolute; left: 0.22em; right: 0; bottom: 2px; height: 1px;
  background: var(--champagne);
  transform: scaleX(0); transform-origin: right; transition: transform 0.5s var(--ease);
}
.nav-links a:hover { opacity: 1; color: var(--champagne-lit); }
.nav-links a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav-links > li > a, .nav-right > li > a { white-space: nowrap; }
/* The mark and, on the full site, the way back to the landing screen: a solid
   gold pill beside it, in the logo's own column so it stays on screen on a
   phone, where the links fold away behind the burger. */
.nav-start { grid-column: 1; grid-row: 1; display: flex; align-items: center; gap: 18px; }
/* An image link in a flex row will shrink to nothing when the bar is tight */
.nav-start .nav-logo, .nav-home { flex: none; }
/* The full bar on a laptop: logo, Home, seven links, the language switch and
   four pills do not fit at their roomy spacing, so it tightens, and Sign up
   steps aside (Sign in's page offers it). Below 1341px the burger takes over. */
@media (min-width: 1341px) and (max-width: 1679px) {
  .nav-inner { gap: 18px; }
  .nav-links { gap: 18px; }
  .nav-links a, .nav-right a { letter-spacing: 0.15em; text-indent: 0.15em; }
  .nav-right { gap: 8px; }
  .nav-auth, .nav-cta { padding: 9px 16px !important; }
  #navSignup { display: none; }
}
.nav-home {
  font-family: var(--sans); font-size: 11px; font-weight: 400; white-space: nowrap;
  text-transform: uppercase; letter-spacing: 0.22em; text-indent: 0.22em;
  background: var(--champagne); color: var(--velvet-deep); border: 1px solid var(--champagne);
  border-radius: 999px; padding: 9px 20px; transition: background 0.35s, border-color 0.35s;
}
.nav-home:hover { background: var(--champagne-lit); border-color: var(--champagne-lit); }
.nav-home:focus-visible { outline: 2px solid var(--champagne-lit); outline-offset: 3px; }
.nav-cta { border: 1px solid var(--champagne-dim); border-radius: 999px; padding: 10px 24px !important; color: var(--champagne) !important; transition: background 0.4s, color 0.4s !important; }
.nav-cta:hover { background: var(--champagne); color: var(--velvet-deep) !important; }
.nav-cta::after { display: none; }

/* Two words, a hairline between them, the active one lit */
.lang-switch { position: relative; display: flex; align-items: center; }
.lang-switch::before { display: none; }
.lang-switch button {
  position: relative; z-index: 1; background: transparent; border: 0; color: var(--cream-dim);
  font-family: var(--sans); font-size: 10.5px; letter-spacing: 0.2em; padding: 6px 9px;
  transition: color 0.35s;
}
.lang-switch button + button { border-left: 1px solid var(--line); }
.lang-switch button.active { color: var(--champagne); }

.burger { display: none; background: none; border: 0; width: 30px; height: 20px; position: relative; z-index: 70; justify-self: end; grid-column: 3; grid-row: 1; }
.burger span { position: absolute; left: 0; width: 100%; height: 1px; background: var(--champagne); transition: 0.4s var(--ease); }
.burger span:nth-child(1) { top: 2px; }
.burger span:nth-child(2) { top: 9px; }
.burger span:nth-child(3) { top: 16px; }
.burger.open span:nth-child(1) { top: 9px; transform: rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { top: 9px; transform: rotate(-45deg); }

/* ---------- Hero ---------- */
/* The film, tinted to the velvet, and the mark of the house coming up in its
   halo the way it does on the sign. The words under it are set in the
   logo's own order: the word, the rule, the spaced capitals, the hours. */
.hero {
  height: 100svh; min-height: 720px;
  position: relative; display: grid; place-items: center;
  text-align: center; overflow: hidden;
  /* The bar is fixed over the top of this box, so centring alone pushes the
     mark under it. The padding gives the nav its own air back. */
  padding: 104px 0 64px;
}
.hero-bg { position: absolute; inset: 0; background: var(--velvet-deep); }
.hero-bg video, .hero-bg img { width: 100%; height: 100%; object-fit: cover; }
.hero-bg img.kb { animation: drift 34s var(--ease) infinite alternate; }
@keyframes drift { from { transform: scale(1.02); } to { transform: scale(1.1); } }
/* The velvet tint over the film, then the shade the words sit in */
.hero-bg::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: var(--velvet); mix-blend-mode: multiply; opacity: 0.55;
}
.hero-bg::after {
  content: ''; position: absolute; inset: 0; z-index: 2;
  background:
    radial-gradient(ellipse 58% 52% at 50% 46%, rgba(107, 26, 38, 0.22), rgba(36, 7, 13, 0.55) 60%, rgba(36, 7, 13, 0.8)),
    linear-gradient(180deg, rgba(36, 7, 13, 0.55) 0%, rgba(36, 7, 13, 0.2) 40%, rgba(36, 7, 13, 0.92) 100%);
}

.hero-content { position: relative; z-index: 2; padding: 0 24px; display: grid; justify-items: center; }
.hero-mark { width: min(440px, 72vw); height: auto; margin-bottom: 40px; filter: drop-shadow(0 8px 40px rgba(36, 7, 13, 0.7)); }
.hero-script {
  font-family: var(--display);
  font-size: clamp(24px, 2.6vw, 38px);
  color: var(--cream);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: 0.01em;
  max-width: 30ch;
  margin: 0 auto;
}
.hero-tag {
  margin-top: 22px;
  font-family: var(--sans);
  color: var(--champagne-dim);
  font-size: 11px; letter-spacing: 0.36em; text-indent: 0.36em; text-transform: uppercase;
}
.hero-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 40px; }

/* Arrival: the light comes up. Blur to sharp, dim to lit, no travel. */
.hero-content > * { opacity: 0; filter: blur(10px); animation: dawn 1.6s var(--ease) forwards; }
.hero-content > *:nth-child(2) { animation-delay: 0.3s; }
.hero-content > *:nth-child(3) { animation-delay: 0.5s; }
.hero-content > *:nth-child(4) { animation-delay: 0.7s; }
.hero-content > *:nth-child(5) { animation-delay: 0.9s; }
@keyframes dawn { to { opacity: 1; filter: blur(0); } }
@keyframes navItemIn { to { opacity: 1; transform: none; } }

/* The hours: two figures either side of the rule */
.hero-hours {
  display: flex; align-items: center; justify-content: center; gap: 18px;
  margin-top: 40px;
  font-family: var(--sans); font-size: 12px; letter-spacing: 0.3em; text-indent: 0.3em;
  color: var(--champagne);
}
.hero-hours i { display: block; width: 64px; height: 1px; background: var(--champagne-dim); }
@media (max-width: 700px) { .hero { padding-top: 92px; } .hero-hours { margin-top: 30px; letter-spacing: 0.22em; text-indent: 0.22em; } .hero-hours i { width: 36px; } }

/* A single hairline of light at the foot of the hero, the way the rule
   sits under the word */
.hero::after {
  content: ''; position: absolute; left: 50%; bottom: 0; width: 1px; height: 72px; z-index: 3;
  background: linear-gradient(180deg, transparent, var(--champagne-dim));
}

/* ---------- Reveal ---------- */
/* Everything on the page arrives the same way the hero does: out of the dark,
   from soft to sharp. The class is added from a scroll handler, not an
   observer, so nothing here hides the box from layout. */
.reveal, .reveal-left { opacity: 0.001; filter: blur(9px); transform: translateY(8px); transition: opacity 1s var(--ease), filter 1.1s var(--ease), transform 1.1s var(--ease); }
.reveal.visible, .reveal-left.visible { opacity: 1; filter: blur(0); transform: none; }
.reveal[data-delay='1'], .reveal-left[data-delay='1'] { transition-delay: 0.14s; }
.reveal[data-delay='2'], .reveal-left[data-delay='2'] { transition-delay: 0.28s; }
.reveal[data-delay='3'], .reveal-left[data-delay='3'] { transition-delay: 0.42s; }

/* ---------- The frame ---------- */
/* A photograph is mounted: a hairline of champagne drawn just inside its
   edge, the way a menu cover is ruled. Hover warms the picture; it never
   moves. */
.img-frame { position: relative; overflow: hidden; background: var(--velvet-deep); }
.img-frame::after {
  content: ''; position: absolute; inset: 12px; z-index: 2; pointer-events: none;
  border: 1px solid rgba(233, 216, 166, 0.55);
  transition: inset 0.7s var(--ease), border-color 0.7s var(--ease);
}
.img-frame:hover::after { inset: 18px; border-color: var(--champagne-lit); }
.img-frame img { transition: transform 1.6s var(--ease), filter 0.8s var(--ease); width: 100%; }
.img-frame:hover img { transform: scale(1.04); filter: brightness(1.06); }

/* ---------- About ---------- */
#about { background: var(--velvet); }
.about-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(40px, 6vw, 96px); align-items: center; }
.about-images { position: relative; padding-bottom: 88px; }
.about-images .img-main { width: 76%; }
.about-images .img-accent { position: absolute; right: 0; bottom: 0; width: 50%; }
.about-text p { color: var(--cream-dim); margin: 26px 0; font-family: var(--serif); font-weight: 300; font-size: 18px; line-height: 1.7; }
/* Four words the house is, on one hairline */
.about-tags { display: flex; flex-wrap: wrap; gap: 0 26px; margin-top: 8px; border-top: 1px solid var(--line); padding-top: 18px; }
.about-tags span { font-family: var(--sans); font-size: 10.5px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--champagne-dim); padding: 4px 0; }

/* ---------- Menu ---------- */
.menu-section { background: var(--ivory); }
.menu-tabs { display: flex; justify-content: center; gap: 0; margin-bottom: 46px; }
.menu-tabs button {
  background: transparent; border: 0; border-bottom: 1px solid var(--rule-on-ivory); color: var(--para);
  padding: 12px 34px;
  font-family: var(--sans); font-size: 11px; letter-spacing: 0.28em; text-indent: 0.28em; text-transform: uppercase;
  transition: color 0.4s var(--ease), border-color 0.4s var(--ease);
}
.menu-tabs button.active { color: var(--ink); border-bottom-color: var(--ink); }
.menu-cols { display: block; }
/* One card's worth of the carte. The two-column layout that used to be on
   .menu-cols lives here now, because .menu-cols holds all four sections. */
.carte-section { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(38px, 4vw, 64px) clamp(44px, 6vw, 96px); align-items: start; }
@media (min-width: 1500px) { .carte-section { grid-template-columns: repeat(3, 1fr); } }
/* min-width:0 stops a long, un-wrapping dish name from forcing its 1fr track
   wider than the container and blowing the whole grid past the page edge. */
.menu-cat { break-inside: avoid; min-width: 0; }
.cat-head { text-align: left; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--rule-on-ivory); }
.menu-cat h3 { font-family: var(--display); font-size: 24px; font-weight: 500; color: var(--ink); line-height: 1.2; margin: 0; }
.menu-cat-sub { font-family: var(--serif); font-style: italic; color: var(--para); font-size: 14.5px; line-height: 1.45; margin: 6px 0 0; }
.menu-item { display: flex; align-items: baseline; gap: 10px; padding: 7px 0; }
.menu-item .mi-name { font-family: var(--serif); font-size: 17px; font-weight: 400; color: var(--ink); white-space: normal; overflow-wrap: anywhere; }
.menu-item .mi-dots { flex: 1; min-width: 18px; border-bottom: 1px dotted rgba(42, 10, 16, 0.3); transform: translateY(-5px); }
/* Bold on purpose. The digits come from the figures cut and the letters from
   Cocogoose, and at weight 400 the figures cut is far lighter than the face
   beside it: "1200" came out thin next to a heavy "MAD". At 700 both take
   their bold cut and the price reads as one word. */
.menu-item .mi-price { font-family: var(--sans); font-weight: 700; color: var(--brass); font-size: 12.5px; letter-spacing: 0.08em; white-space: nowrap; }
/* "Sur demande" is words, not a number, and is set like the description */
.menu-item .mi-price.mi-ask { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 14px; letter-spacing: 0; text-transform: none; }
.menu-item-desc { font-family: var(--sans); color: var(--para); opacity: 0.85; font-size: 13.5px; line-height: 1.55; margin: -3px 0 8px; max-width: 90%; }

/* A shot sold by the number: a column per combination, under the one name.
   Space between them rather than rules or boxes, so the band reads as part
   of the entry and not as a table pasted into it, and so nothing dangles
   when the columns wrap on a phone: :last-child is the last of all of them,
   not the last of a row, and nothing in CSS knows where a flex row breaks. */
/* What is in a happy hour formule. Set apart from the description by its
   weight rather than by a box, so the entry still reads as one thing. */
.mi-formula {
  font-family: var(--sans); font-size: 12.5px; letter-spacing: .02em;
  color: var(--brass); margin: -1px 0 9px;
}
.mi-sizes { display: flex; flex-wrap: wrap; gap: 6px 30px; margin: 2px 0 12px; }
.mi-size { display: grid; gap: 3px; padding: 2px 0; }
.mi-size-n { font-family: var(--sans); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--para); opacity: 0.8; white-space: nowrap; }
.mi-size-p { font-family: var(--sans); font-weight: 700; color: var(--brass); font-size: 12.5px; letter-spacing: 0.08em; white-space: nowrap; }
.mi-size-p.mi-ask { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 13px; letter-spacing: 0; text-transform: none; }
.mi-size-p .mi-was { opacity: 0.55; margin-right: 6px; }
.menu-actions { text-align: center; margin-top: 50px; }
.menu-page { padding-top: clamp(46px, 5vw, 76px); }
.menu-page .promo-notice { margin-bottom: 24px; }

/* The picture beside each entry. It sits outside the name-and-price line so
   the dotted leader and the price columns are untouched; the line and its
   description share the body to its right. A cut-out bottle gets a faint
   warm ground rather than the page's ivory, so it does not read as pasted on.
   An entry without a picture keeps an empty slot of the same width, so the
   names of a list stay in one column. */
.menu-entry { display: flex; align-items: flex-start; gap: 14px; }
.menu-entry + .menu-entry { margin-top: 2px; }
.mi-body { flex: 1; min-width: 0; }
.mi-pic {
  flex: none; width: 72px; height: 72px; margin-top: 6px; padding: 0;
  border: 1px solid var(--rule-on-ivory-soft); border-radius: 12px; overflow: hidden;
  background: rgba(42, 10, 16, 0.04); cursor: zoom-in;
  transition: transform 0.35s var(--ease), border-color 0.35s var(--ease);
}
.mi-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mi-pic:hover { transform: translateY(-2px); border-color: var(--brass); }
.mi-pic-none { border-color: transparent; background: none; cursor: default; }
.mi-pic-none:hover { transform: none; }
.menu-entry .menu-item-desc { max-width: none; }

/* The picture opened at full size, over the page */
.mi-look {
  position: fixed; inset: 0; z-index: 130; display: grid; place-items: center; align-content: center; gap: 14px;
  padding: 24px; background: rgba(20, 4, 8, 0.94); cursor: zoom-out;
}
/* display:grid above would otherwise beat the hidden attribute, and the veil
   would sit over the carte from the first paint. */
.mi-look[hidden] { display: none; }
.mi-look img { max-width: min(900px, 100%); max-height: 78vh; border-radius: 14px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5); }
.mi-look-cap { font-family: var(--serif); font-size: 18px; color: var(--cream); text-align: center; }

/* Glass and bottle are two lines, each with its own price, exactly as the
   panel holds them. They were once folded into one line with two price
   columns; that layout is gone, along with its column headings. */

/* ---------- The signature band ---------- */
/* The cocktails. Night velvet, the list in its own halo, the copy beside it. */
.formule { background: var(--velvet-deep); color: var(--cream-dim); overflow: hidden; }
.formule::after {
  content: ''; position: absolute; right: -10%; top: 50%; width: 70%; height: 140%; transform: translateY(-50%);
  background: var(--halo-warm); pointer-events: none;
}
.formule > .container { position: relative; z-index: 1; }
.formule .kicker { color: var(--champagne-dim); }
.formule .section-title { color: var(--champagne); }
.formule-inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 7vw, 100px); align-items: center; }
.formule-copy .section-title { font-size: clamp(34px, 3.6vw, 52px); }
.formule-copy > p { color: var(--cream-dim); margin-bottom: 26px; max-width: 46ch; font-family: var(--serif); font-weight: 300; font-size: 18px; line-height: 1.65; }
.formule-time { font-family: var(--sans); font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--champagne); margin: 22px 0 !important; }
.formule-copy .btn { margin-top: 8px; }
.formule-list { position: relative; padding: 8px 0; }
.formule-list::before { content: ''; position: absolute; inset: -60px -40px; background: var(--halo); pointer-events: none; }
.fm-row { position: relative; display: flex; align-items: baseline; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.fm-row:last-child { border-bottom: 0; }
.fm-name { font-family: var(--serif); font-weight: 400; font-size: 18px; color: var(--cream); }
.fm-dots { flex: 1; border-bottom: 1px dotted rgba(233, 216, 166, 0.3); transform: translateY(-5px); }
.fm-price { font-family: var(--sans); font-size: 12.5px; letter-spacing: 0.08em; color: var(--champagne); white-space: nowrap; }
@media (max-width: 900px) { .formule-inner { grid-template-columns: 1fr; } }

/* ---------- La semaine ---------- */
/* Seven nights on one hairline. The night the page is read on is lit. */
.programme-section { background: var(--velvet); }
.programme-grid { display: grid; grid-template-columns: repeat(7, 1fr); border-top: 1px solid var(--line); }
.prog-day { position: relative; padding: 28px 16px 30px; text-align: left; border-right: 1px solid var(--line-soft); transition: background 0.5s var(--ease); }
.prog-day:last-child { border-right: 0; }
.prog-day::before { content: ''; position: absolute; left: 16px; top: -1px; width: 0; height: 1px; background: var(--champagne); transition: width 0.6s var(--ease); }
.prog-day:hover::before, .prog-day.today::before { width: calc(100% - 32px); }
.prog-day.today { background: linear-gradient(180deg, rgba(233, 216, 166, 0.07), transparent); }
.prog-name { display: block; font-family: var(--sans); font-size: 10.5px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--champagne-dim); }
.prog-day.today .prog-name { color: var(--champagne); }
.prog-hours { display: block; font-family: var(--sans); font-size: 12px; color: var(--cream-dim); margin-top: 12px; letter-spacing: 0.08em; }
.prog-note { display: block; font-family: var(--display); font-size: 19px; line-height: 1.3; color: var(--cream); margin-top: 16px; min-height: 50px; }
.prog-note:empty::before { content: '·'; opacity: 0.3; }
.prog-day.shut .prog-hours { color: var(--err); }
@media (max-width: 1100px) { .programme-grid { grid-template-columns: repeat(4, 1fr); } .prog-day:nth-child(4) { border-right: 0; } }
@media (max-width: 620px) { .programme-grid { grid-template-columns: repeat(2, 1fr); } .prog-day:nth-child(even) { border-right: 0; } .prog-day:nth-child(4) { border-right: 1px solid var(--line-soft); } .prog-note { font-size: 17px; } }

/* ---------- Spaces ---------- */
#spaces { background: var(--velvet); }
.spaces-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.space-card { position: relative; margin: 0; }
.space-card img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; transition: transform 1.6s var(--ease), filter 0.8s var(--ease); }
/* The mount, drawn over the picture */
.space-card::before { content: ''; position: absolute; left: 12px; right: 12px; top: 12px; height: calc(100% - 24px - 78px); border: 1px solid rgba(233, 216, 166, 0.5); z-index: 2; pointer-events: none; }
.space-card:hover img { filter: brightness(1.06); }
.space-card figcaption { padding: 20px 0 0; height: 78px; }
.space-card figcaption span { display: block; font-family: var(--display); font-size: 24px; color: var(--champagne); line-height: 1.1; }
.space-card figcaption small { display: block; font-family: var(--sans); font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--cream-dim); margin-top: 8px; line-height: 1.5; }
.space-card figcaption small:empty { display: none; }

/* ---------- Gallery ---------- */
/* Six pictures, portrait, the lead taking four cells. Each is mounted. */
.gallery-section { background: var(--velvet-deep); }
.gal-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: calc((min(1180px, 90vw) - 28px) / 3 * 1.25); gap: 14px; }
.gal-grid figure { position: relative; overflow: hidden; margin: 0; cursor: zoom-in; background: var(--velvet); }
.gal-grid figure::after { content: ''; position: absolute; inset: 10px; border: 1px solid rgba(233, 216, 166, 0.4); pointer-events: none; transition: inset 0.6s var(--ease), border-color 0.6s var(--ease); }
.gal-grid figure:hover::after { inset: 16px; border-color: var(--champagne-lit); }
.gal-grid figure:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.gal-grid img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.4s var(--ease), filter 0.6s var(--ease); }
.gal-grid figure:hover img { transform: scale(1.04); filter: brightness(1.05); }
@media (max-width: 760px) {
  .gal-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: calc(45vw * 1.25); gap: 10px; }
  .gal-grid figure:nth-child(1) { grid-column: span 2; grid-row: span 2; }
}

.lightbox { position: fixed; inset: 0; z-index: 90; background: rgba(36, 7, 13, 0.97); display: grid; place-items: center; opacity: 0; pointer-events: none; transition: opacity 0.4s; }
.lightbox.open { opacity: 1; pointer-events: auto; }
.lightbox img { max-width: 90vw; max-height: 86vh; object-fit: contain; }
.lightbox button { position: absolute; background: none; border: 1px solid var(--line); border-radius: 50%; color: var(--champagne); width: 50px; height: 50px; font-size: 18px; transition: 0.35s; display: grid; place-items: center; }
.lightbox button:hover { border-color: var(--champagne); background: var(--champagne); color: var(--velvet-deep); }
.lb-close { top: 26px; right: 26px; }
.lb-prev { left: 26px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 26px; top: 50%; transform: translateY(-50%); }

/* ---------- Hours / contact / map ---------- */
.info-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(40px, 5vw, 80px); align-items: stretch; }
.info-grid.no-map { grid-template-columns: 1fr; max-width: 640px; }
.hours-list { list-style: none; margin-top: 8px; }
.hours-list li { display: flex; align-items: baseline; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--rule-on-ivory-soft); font-size: 15px; }
.hours-list .day-col { display: grid; gap: 3px; }
.hours-list .day { font-family: var(--sans); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.26em; color: var(--ink); }
.hours-list .day-note { font-family: var(--serif); font-style: italic; font-size: 15px; line-height: 1.3; color: var(--ink-soft); }
.hours-list .dots { flex: 1; border-bottom: 1px dotted rgba(42, 10, 16, 0.28); transform: translateY(-4px); }
.hours-list .time { font-family: var(--sans); font-size: 12.5px; color: var(--brass); letter-spacing: 0.1em; }
.hours-list .closed { font-family: var(--sans); font-size: 11px; color: var(--err-on-ivory); text-transform: uppercase; letter-spacing: 0.16em; }
.contact-lines { margin-top: 30px; display: grid; gap: 12px; color: var(--para); font-size: 14px; font-family: var(--sans); letter-spacing: 0.04em; }
.contact-lines a:hover { color: var(--ink); }
.contact-lines strong { color: var(--brass); font-weight: 400; }
#map { min-height: 440px; height: 100%; border: 1px solid var(--rule-on-ivory); z-index: 1; }
#map .leaflet-tile-pane { filter: sepia(0.35) saturate(0.7) contrast(0.95); }
#map .leaflet-control-attribution { background: rgba(244, 236, 220, 0.9); color: var(--para); }
#map .leaflet-control-attribution a { color: var(--brass); }
#map .leaflet-bar a { background: var(--ivory); color: var(--ink); border-bottom-color: var(--rule-on-ivory); }
#map .leaflet-bar a:hover { background: var(--ivory-2); }
/* The pin: a point of champagne on velvet, a ring of light widening from it */
.map-pin { position: relative; width: 22px; height: 22px; }
.map-pin::before { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: var(--champagne); border: 2px solid var(--velvet); box-shadow: 0 0 0 1px var(--champagne); }
.map-pin::after { content: ''; position: absolute; inset: -10px; border-radius: 50%; border: 1px solid var(--champagne); animation: pin-pulse 2.6s ease-out infinite; }
@keyframes pin-pulse { from { transform: scale(0.5); opacity: 0.9; } to { transform: scale(1.4); opacity: 0; } }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--velvet-deep); color: var(--cream); border-radius: 0; }
.leaflet-popup-content a { color: var(--champagne); }

/* ---------- Reservation ---------- */
/* Two columns on night velvet: the words on the left, the form on the right,
   fields drawn as one hairline each. */
.reserve-section { background: var(--velvet-deep); overflow: hidden; }
.reserve-section::after { content: ''; position: absolute; left: -10%; top: 50%; width: 60%; height: 120%; transform: translateY(-50%); background: var(--halo-warm); pointer-events: none; }
.reserve-section > .container { position: relative; z-index: 1; }
.reserve-panel { position: relative; display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(40px, 6vw, 96px); align-items: start; }
.reserve-panel .section-head { text-align: left; margin-bottom: 0; }
.reserve-panel .section-head.center { text-align: left; }
.reserve-panel .section-head.center .kicker { text-indent: 0; }
.reserve-panel .section-head.center .section-title { max-width: 14ch; }
.reserve-panel .section-head.center .section-title::after { left: 0; transform: none; }
.reserve-panel .section-head.center .section-sub { margin-left: 0; }
.reserve-panel .kicker { color: var(--champagne-dim); }
.reserve-panel .section-title { color: var(--champagne); }
.reserve-panel .section-sub, .reserve-panel .form-note { color: var(--cream-dim); }
.reserve-panel .prefill-note { color: var(--champagne); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 28px; margin-top: 0; }
.form-field { display: grid; gap: 8px; }
.form-field.full { grid-column: 1 / -1; }
.form-field label { font-family: var(--sans); font-size: 10px; text-transform: uppercase; letter-spacing: 0.28em; color: var(--champagne-dim); }
.form-field input, .form-field select {
  background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
  color: var(--cream); padding: 12px 0;
  font-family: var(--serif); font-size: 17px; width: 100%; appearance: none;
  transition: border-color 0.35s;
}
.form-field input:focus, .form-field select:focus { outline: none; border-bottom-color: var(--champagne); }
.form-field input::placeholder { color: rgba(243, 233, 216, 0.35); }
.form-field select { background-image: linear-gradient(45deg, transparent 50%, var(--champagne) 50%), linear-gradient(135deg, var(--champagne) 50%, transparent 50%); background-position: calc(100% - 12px) 55%, calc(100% - 7px) 55%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 26px; }
.form-field select option { background: var(--velvet-deep); color: var(--cream); }
.form-field input[type='date'], .form-field input[type='time'] { color-scheme: dark; }
.phone-row { display: grid; grid-template-columns: 124px 1fr; gap: 14px; }
.form-note { color: var(--cream-dim); font-size: 13px; margin-top: 20px; text-align: left; }
.form-submit { margin-top: 34px; text-align: left; }
.form-msg { margin-top: 20px; text-align: left; font-size: 14px; display: none; }
.form-msg.ok { display: block; color: var(--ok); }
.form-msg.err { display: block; color: var(--err); }
.field-note { display: block; margin-top: 6px; font-size: 12.5px; color: var(--cream-dim); letter-spacing: 0.02em; }
.prefill-note { color: var(--champagne); font-size: 13px; margin-top: 12px; }

/* ---------- Footer ---------- */
footer { background: var(--velvet-deep); color: var(--cream-dim); padding: 90px 0 34px; }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 46px; margin-bottom: 54px; }
.footer-grid h4 { font-family: var(--sans); font-size: 10.5px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.3em; margin-bottom: 22px; color: var(--champagne); }
.footer-grid p { color: var(--cream-dim); font-size: 15px; line-height: 1.75; font-family: var(--serif); font-weight: 300; }
.footer-grid a, .footer-grid li { color: var(--cream-dim); font-size: 13.5px; line-height: 1.9; list-style: none; font-family: var(--sans); letter-spacing: 0.04em; }
.footer-grid a:hover { color: var(--champagne-lit); }
.footer-grid ul { display: grid; gap: 12px; }
.footer-logo { height: 78px; width: auto; margin-bottom: 26px; }
.socials { display: flex; gap: 14px; margin-top: 26px; }
/* The official marks in their own colours, unframed */
.socials a { width: 42px; height: 42px; display: block; transition: filter 0.35s var(--ease); }
.socials a img { width: 100%; height: 100%; object-fit: contain; display: block; }
.socials a:hover { filter: brightness(1.12); }
.footer-bottom {
  border-top: 1px solid var(--line-soft); padding-top: 28px;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  color: var(--cream-dim); font-family: var(--sans); font-size: 11px; letter-spacing: 0.12em;
}
.footer-bottom a:hover { color: var(--champagne-lit); }

/* ---------- Subpages ---------- */
.page-hero { height: 52vh; min-height: 380px; display: grid; place-items: center; text-align: center; position: relative; overflow: hidden; padding: 0; }
.page-hero .hero-bg img { animation: none; }
.page-hero .hero-bg::after { background: linear-gradient(180deg, rgba(36, 7, 13, 0.7) 0%, rgba(36, 7, 13, 0.45) 45%, rgba(36, 7, 13, 0.92) 100%); }
.hero-video { display: block; }
.page-hero .hero-video { filter: blur(2px); transform: scale(1.05); }
@media (prefers-reduced-motion: reduce), (max-width: 720px) {
  .hero-video { display: none; }
  .page-hero .hero-bg { background: url('../images/menu-hero-poster.jpg') center / cover no-repeat; }
  .page-faq .page-hero .hero-bg { background-image: url('../images/faq-hero-poster.jpg'); }
}
.page-hero .hero-title { font-family: var(--display); font-weight: 500; line-height: 1.06; letter-spacing: 0.005em; }
.page-hero h1, .page-hero .hero-title { font-size: clamp(40px, 5.4vw, 72px); position: relative; z-index: 3; color: var(--champagne); padding-bottom: 22px; }
.page-hero h1::after, .page-hero .hero-title::after { content: ''; position: absolute; left: 50%; bottom: 0; width: 64px; height: 1px; background: var(--champagne-dim); transform: translateX(-50%); }
.page-hero .kicker { position: relative; z-index: 3; color: var(--champagne-dim); text-indent: 0.34em; margin-bottom: 14px; }
.legal { max-width: 820px; margin: 0 auto; }
.legal h1 { font-size: clamp(34px, 4vw, 54px); }
.legal h2 { font-family: var(--sans); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.3em; margin: 48px 0 16px; color: var(--champagne); font-weight: 400; }
.legal p, .legal li { color: var(--cream-dim); font-size: 15.5px; margin-bottom: 12px; font-family: var(--serif); font-weight: 300; line-height: 1.7; }
.legal ul { padding-left: 20px; }
.faq-section { padding: 70px 0 40px; }
/* Not .container: that one is width: min(1180px, 90vw), and on anything
   wider than ~1310px that cap, not this 80%, would be the one deciding. */
.faq-wide { width: 80%; margin: 0 auto; }
.faq-intro { color: var(--cream-dim); font-size: 19px; font-family: var(--serif); font-weight: 300; line-height: 1.7; margin: 0 auto 36px; max-width: 70ch; text-align: center; }
#faqList { display: grid; gap: 18px; }
/* Each question is an ivory card on the velvet, the paper the carte is
   printed on. A soft shadow lifts it; no hard edge anywhere. */
.faq-item {
  background: var(--ivory); color: var(--ink); border-radius: 14px;
  box-shadow: 0 10px 30px rgba(10, 2, 4, 0.35), 0 2px 6px rgba(10, 2, 4, 0.25);
  overflow: hidden;
}
.faq-q { margin: 0; }
.faq-toggle {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  background: none; border: 0; cursor: pointer; text-align: left; color: var(--ink);
  font-family: var(--serif); font-weight: 700; font-size: 23px; line-height: 1.35;
  padding: 26px 32px;
}
.faq-toggle:focus-visible { outline: 2px solid var(--brass); outline-offset: -4px; border-radius: 14px; }
.faq-chev {
  flex: none; width: 26px; height: 26px; fill: none; stroke: var(--ink);
  stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform 0.35s var(--ease);
}
.faq-item.open .faq-chev { transform: rotate(180deg); }
/* 0fr to 1fr animates the real height of the answer, whatever its length */
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.4s var(--ease); }
.faq-item.open .faq-a { grid-template-rows: 1fr; }
.faq-a-inner { overflow: hidden; visibility: hidden; transition: visibility 0s linear 0.4s; }
.faq-item.open .faq-a-inner { visibility: visible; transition-delay: 0s; }
.faq-a p {
  margin: 0; padding: 0 32px 28px; color: var(--ink-soft);
  font-family: var(--serif); font-weight: 500; font-size: 18px; line-height: 1.7;
}
@media (prefers-reduced-motion: reduce) {
  .faq-a, .faq-chev { transition: none; }
}
@media (max-width: 900px) {
  .faq-wide { width: 92%; }
  .faq-toggle { font-size: 19px; padding: 20px 22px; gap: 16px; }
  .faq-chev { width: 22px; height: 22px; }
  .faq-a p { font-size: 16.5px; padding: 0 22px 22px; }
}

/* ---------- Toast ---------- */
.toast {
  position: fixed; top: 0; left: 50%; z-index: 120; transform: translate(-50%, -130%);
  display: flex; align-items: center; gap: 14px;
  width: min(620px, calc(100vw - 32px)); margin-top: 16px; padding: 16px 22px;
  background: var(--velvet-deep); color: var(--cream); border: 1px solid var(--line);
  font-size: 14.5px; line-height: 1.5;
  transition: transform .55s var(--ease), opacity .4s var(--ease); opacity: 0;
}
.toast.show { transform: translate(-50%, 0); opacity: 1; }
.toast::before { content: ''; flex: none; width: 1px; align-self: stretch; background: var(--ok); }
.toast.err::before { background: var(--err); }
.toast .toast-close { margin-left: auto; flex: none; background: none; border: 0; cursor: pointer; font-size: 18px; line-height: 1; color: var(--cream-dim); padding: 0 2px; }
.toast .toast-close:hover { color: var(--champagne); }
@media (max-width: 560px) { .toast { font-size: 13.5px; padding: 14px 16px; } }

/* ---------- Account ---------- */
.nav-auth { border: 1px solid var(--line); border-radius: 999px; padding: 10px 22px !important; letter-spacing: 0.2em; text-indent: 0.2em; transition: background .35s, color .35s, border-color .35s; }
.nav-auth::after { display: none; }
.nav-auth:hover { border-color: var(--champagne); color: var(--champagne-lit) !important; }
.nav-auth.signed-in { border-color: var(--champagne); color: var(--champagne) !important; }
.nav-auth.nav-faq { border-color: var(--champagne-dim); color: var(--champagne) !important; }
.nav-auth.nav-faq:hover { border-color: var(--champagne); color: var(--champagne-lit) !important; }

.page-account { background: var(--velvet-deep); }
.page-account::before { content: ''; position: fixed; inset: 0; z-index: -2; background: url('/images/account-bg.jpg') center/cover no-repeat; }
.page-account::after { content: ''; position: fixed; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(36, 7, 13, .78), rgba(36, 7, 13, .86) 55%, rgba(36, 7, 13, .96)); }
.page-account .nav { background: rgba(36, 7, 13, 0.9); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 1px 0 var(--line-soft); padding: 12px 0; }
.page-account .nav-logo img { height: 38px; }
.account-main { padding: calc(96px + var(--promo-h, 0px)) 0 36px; min-height: 100vh; box-sizing: border-box; display: flex; align-items: center; }
.account-main > .container { width: min(1180px, 90vw); }
.account-main section { padding: 0; }
.page-account footer { border-top: 1px solid var(--line-soft); background: rgba(36, 7, 13, .6); }
.page-account footer::before { display: none; }

.auth-wrap { display: flex; justify-content: center; width: 100%; }
.auth-card { position: relative; width: min(560px, 100%); background: rgba(58, 12, 20, 0.82); border: 1px solid var(--line); padding: 40px 40px 34px; text-align: center; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.auth-card::after { content: ''; position: absolute; inset: 8px; pointer-events: none; border: 1px solid var(--line-soft); }
.auth-card > * { position: relative; z-index: 1; }
.auth-logo { width: 190px; height: auto; margin: 0 auto 18px; display: block; }
.auth-card .section-title { font-size: 30px; margin: 0 0 8px; max-width: none; padding-bottom: 18px; }
.auth-card .section-title::after { left: 50%; transform: translateX(-50%); width: 40px; }
.auth-sub { color: var(--cream-dim); font-size: 13.5px; line-height: 20px; margin-bottom: 18px; }
.auth-form { display: grid; gap: 6px; text-align: left; }
#signupForm { grid-template-columns: 1fr 1fr; column-gap: 18px; }
#signupForm .full { grid-column: 1 / -1; }
.auth-form label { font-family: var(--sans); font-size: 10px; text-transform: uppercase; letter-spacing: 0.26em; color: var(--champagne-dim); margin-top: 10px; }
.auth-form input { width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 11px 0; color: var(--cream); font-family: var(--serif); font-size: 16px; }
.auth-form input:focus { outline: none; border-bottom-color: var(--champagne); }
.auth-form input[type='date'] { color-scheme: dark; }
.auth-form .btn { margin-top: 20px; width: 100%; }
.auth-form .btn.ghost { margin-top: 8px; }
.auth-hint { font-size: 11px; color: var(--cream-dim); line-height: 16px; margin-top: 4px; }
.gender-row { display: flex; gap: 0; border-bottom: 1px solid var(--line); }
.gender-row button { flex: 1; background: transparent; border: 0; color: var(--cream-dim); padding: 10px 6px; font-size: 12px; font-family: var(--sans); letter-spacing: 0.1em; text-transform: uppercase; transition: .3s; border-bottom: 1px solid transparent; margin-bottom: -1px; }
.gender-row button:hover { color: var(--cream); }
.gender-row button.active { color: var(--champagne); border-bottom-color: var(--champagne); }
.auth-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.auth-msg { font-size: 13px; min-height: 18px; margin-top: 8px; text-align: center; grid-column: 1 / -1; }
.auth-msg.err { color: var(--err); }
.auth-msg.ok { color: var(--ok); }
.auth-switch { font-size: 13px; color: var(--cream-dim); text-align: center; margin-top: 14px; grid-column: 1 / -1; }
.auth-switch a { color: var(--champagne); border-bottom: 1px solid var(--line); }
.pending-title { font-family: var(--display); font-size: 26px; margin-bottom: 8px; color: var(--champagne); }

.auth-form select { width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 11px 24px 11px 0; color: var(--cream); font-family: var(--serif); font-size: 16px; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--champagne) 50%), linear-gradient(135deg, var(--champagne) 50%, transparent 50%);
  background-position: calc(100% - 10px) 50%, calc(100% - 5px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.auth-form select:focus { outline: none; border-bottom-color: var(--champagne); }
.auth-form select option { background: var(--velvet-deep); color: var(--cream); }

.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 40px; }
.pw-eye { position: absolute; right: 0; top: 50%; transform: translateY(-50%); background: none; border: 0; cursor: pointer; line-height: 0; padding: 9px 4px; color: var(--cream-dim); transition: color .25s; }
.pw-eye svg { width: 20px; height: 20px; fill: currentColor; display: block; }
.pw-eye .eye-shut { display: none; }
.pw-eye.on { color: var(--champagne); }
.pw-eye.on .eye-open { display: none; }
.pw-eye.on .eye-shut { display: block; }
.pw-eye:hover { color: var(--champagne-lit); }

.auth-form label.stay-row { display: flex; align-items: center; gap: 9px; margin-top: 12px; font-family: var(--sans); font-size: 12.5px; text-transform: none; letter-spacing: 0.02em; color: var(--cream-dim); cursor: pointer; }
.stay-row input { width: 15px; height: 15px; accent-color: var(--champagne); cursor: pointer; }
.stay-line { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.stay-line .stay-row { margin-top: 12px; }
.forgot-link { margin-top: 12px; font-size: 12.5px; color: var(--champagne); border-bottom: 1px solid var(--line); white-space: nowrap; }
.forgot-link:hover { color: var(--champagne-lit); }
.birthday-note { font-size: 12px; color: var(--cream-dim); margin-top: 12px; text-align: center; border-top: 1px solid var(--line-soft); padding: 10px 0 0; }

/* The signed-in view: one column of type and hairlines, no boxes inside boxes */
.account-main:has(#memberView:not(.hidden)) { align-items: flex-start; }
.member { max-width: 920px; margin: 0 auto; }
.member-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding-bottom: 28px; border-bottom: 1px solid var(--line); }
.member-head .kicker { display: block; margin-bottom: 14px; }
.member-name { font-family: var(--display); font-weight: 400; font-size: clamp(36px, 5vw, 56px); line-height: 1.05; color: var(--champagne); overflow-wrap: anywhere; }
.member-email { margin-top: 10px; font-family: var(--serif); font-weight: 300; font-size: 17px; color: var(--cream-dim); overflow-wrap: anywhere; }
.member-signout { flex: none; }
.member-grid { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--line-soft); }
.member::before, .member section::before { display: none; }
.account-main .member-block { padding: 32px 36px 34px 0; }
.account-main .member-block + .member-block { padding: 32px 0 34px 36px; border-left: 1px solid var(--line-soft); }
.member-block h2 { font-family: var(--display); font-weight: 400; font-size: 26px; color: var(--champagne); margin-bottom: 8px; }
.member-block p { font-family: var(--serif); font-weight: 300; font-size: 16.5px; line-height: 1.6; color: var(--cream-dim); margin-bottom: 20px; max-width: 38ch; }
.account-main .member-res { padding-top: 40px; }
.member-heading { font-family: var(--display); font-weight: 400; font-size: 26px; margin-bottom: 14px; color: var(--champagne); }
.res-list { display: grid; gap: 0; border-top: 1px solid var(--line-soft); }
.res-list > .muted { padding: 18px 0; font-family: var(--serif); font-weight: 300; font-size: 16.5px; color: var(--cream-dim); }
.res-card { display: flex; align-items: center; gap: 24px; padding: 18px 0; border-bottom: 1px solid var(--line-soft); }
.res-when { display: flex; align-items: baseline; gap: 14px; flex: 1; min-width: 0; }
.res-when b { font-family: var(--display); font-size: 20px; font-weight: 400; color: var(--cream); }
.res-when b::first-letter { text-transform: uppercase; }
.res-when span { font-family: var(--sans); font-size: 12px; letter-spacing: 0.14em; color: var(--champagne); }
.res-meta { font-family: var(--serif); font-weight: 300; font-size: 15.5px; color: var(--cream-dim); white-space: nowrap; }
.res-badge { font-family: var(--sans); font-size: 10px; letter-spacing: 0.2em; text-indent: 0.2em; text-transform: uppercase; padding: 6px 14px; border-radius: 999px; border: 1px solid; }
.res-badge.pending { color: var(--champagne); border-color: var(--line); }
.res-badge.confirmed { color: var(--ok); border-color: rgba(143, 208, 164, 0.5); }
.res-badge.cancelled { color: var(--err); border-color: rgba(240, 161, 155, 0.5); }

/* ---------- Contact band ---------- */
/* The room under a velvet veil, the facts on one hairline row */
.contact-band { position: relative; padding: 110px 0; overflow: hidden; background: url('/images/contact-bg.jpg') center/cover no-repeat fixed; }
.contact-band::before { content: ''; position: absolute; inset: 0; height: auto; z-index: 0; background: linear-gradient(180deg, rgba(36, 7, 13, .9), rgba(58, 12, 20, .78) 55%, rgba(36, 7, 13, .94)); }
.contact-band > .container { position: relative; z-index: 1; }
.contact-inner { text-align: center; max-width: 1080px; margin: 0 auto; }
.contact-inner .section-title { max-width: none; }
.contact-inner .section-title::after { left: 50%; transform: translateX(-50%); }
.contact-inner .kicker { text-indent: 0.34em; }
.contact-lead { color: var(--cream-dim); max-width: 620px; margin: 24px auto 48px; font-family: var(--serif); font-weight: 300; font-size: 18px; line-height: 1.65; }
.contact-cards { display: flex; flex-wrap: wrap; justify-content: center; gap: 0; margin-bottom: 44px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.contact-card { flex: 1 1 200px; display: grid; gap: 6px; text-align: center; text-decoration: none; padding: 26px 18px; border-right: 1px solid var(--line-soft); transition: background .4s var(--ease); }
.contact-card:last-child { border-right: 0; }
a.contact-card:hover { background: rgba(233, 216, 166, 0.06); }
.cc-icon { display: none; }
.cc-body { display: grid; gap: 6px; min-width: 0; }
.cc-body small { font-family: var(--sans); font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--champagne-dim); }
/* Numbers and addresses: the label face reads them more clearly than the
   serif, whose figure one is easy to mistake for an I. */
.cc-body b { font-family: var(--sans); font-weight: 400; font-size: 14px; letter-spacing: 0.04em; line-height: 1.5; color: var(--cream); overflow-wrap: anywhere; }
.contact-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 32px; }
.contact-band .socials { justify-content: center; }
@media (max-width: 720px) { .contact-card { flex-basis: 100%; border-right: 0; border-bottom: 1px solid var(--line-soft); } .contact-card:last-child { border-bottom: 0; } }

/* ---------- Deals ---------- */
.deals-main { align-items: flex-start; padding-top: 120px; }
.deals-main .section-head { margin-bottom: 32px; }
.deals-empty { border: 1px solid var(--line); padding: 44px 32px; text-align: center; color: var(--cream-dim); max-width: 580px; margin: 0 auto; background: rgba(58, 12, 20, 0.7); }
.deals-empty .contact-actions { margin-top: 24px; margin-bottom: 0; }
.deal-group { margin-bottom: 42px; }
.deal-group h2 { font-family: var(--sans); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.3em; color: var(--champagne-dim); font-weight: 400; margin-bottom: 18px; }
.deal-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.deal-card { position: relative; display: flex; gap: 15px; align-items: center; background: rgba(58, 12, 20, 0.8); border: 1px solid var(--line); padding: 16px; transition: border-color .35s var(--ease); }
.deal-card:hover { border-color: var(--champagne); }
.deal-card img { width: 74px; height: 74px; object-fit: cover; flex: none; }
.deal-body { min-width: 0; flex: 1; }
.deal-body h3 { font-family: var(--display); font-size: 20px; margin-bottom: 3px; }
.deal-body p { color: var(--cream-dim); font-size: 12.5px; margin-bottom: 7px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.deal-prices { display: flex; align-items: baseline; gap: 10px; }
.deal-prices s { color: var(--cream-dim); opacity: .6; font-size: 13px; }
.deal-prices b { font-family: var(--sans); color: var(--champagne); font-size: 15px; letter-spacing: 0.08em; }
.deal-badge { position: absolute; top: 12px; right: 12px; color: var(--champagne); border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; font-family: var(--sans); font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; }
.mi-was { opacity: 0.55; margin-right: 10px; font-size: 0.92em; text-decoration: line-through; }
.mi-deal { color: var(--ok-on-ivory); font-weight: 400; }
.formule .mi-deal, .deal-card .mi-deal { color: var(--ok); }
.nav-deals { color: var(--champagne) !important; }

/* ---------- Delete account ---------- */
.del-card { max-width: 660px; text-align: left; }
.del-card .section-title { text-align: center; }
.del-card .auth-sub { text-align: center; margin-bottom: 28px; }
.del-block { margin-bottom: 28px; }
.del-block h2 { font-family: var(--sans); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.26em; color: var(--champagne); margin-bottom: 12px; font-weight: 400; }
.del-list { list-style: none; display: grid; gap: 9px; }
.del-list li { position: relative; padding-left: 20px; font-size: 14.5px; line-height: 1.6; color: var(--cream-dim); font-family: var(--serif); }
.del-list li::before { content: ''; position: absolute; left: 0; top: 12px; width: 8px; height: 1px; background: var(--champagne); }
.del-note { font-size: 13.5px; color: var(--cream-dim); margin-top: 14px; line-height: 1.6; }
.del-or { margin-top: 22px; }
.del-app { border-top: 1px solid var(--line-soft); padding-top: 18px; margin-top: 24px; opacity: 0.85; }
.del-card .btn { width: 100%; margin-top: 12px; text-align: center; }

/* ---------- Time picker ---------- */
.timepick { position: relative; }
.timepick-btn { width: 100%; display: flex; align-items: center; gap: 10px; background: transparent; border: 0; border-bottom: 1px solid var(--line); color: var(--cream-dim); padding: 12px 0; font-family: var(--serif); font-size: 17px; text-align: left; border-radius: 0; transition: border-color 0.35s, color 0.35s; }
.timepick-btn:hover, .timepick-btn.open { border-bottom-color: var(--champagne); }
.timepick-btn.chosen { color: var(--cream); }
.timepick-btn .tp-caret { width: 0; height: 0; flex: none; margin-left: auto; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid var(--champagne); transition: transform 0.3s var(--ease); }
.timepick-btn.open .tp-caret { transform: rotate(180deg); }
.timepick-btn svg { width: 15px; height: 15px; fill: var(--champagne-dim); flex: none; }
.timepick-panel { position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 6px); max-height: 236px; overflow-y: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 10px; background: var(--velvet-deep); border: 1px solid var(--line); box-shadow: 0 24px 60px rgba(20, 4, 8, 0.6); }
.timepick-panel[hidden] { display: none; }
.timepick-slot { background: transparent; border: 1px solid transparent; border-radius: 999px; color: var(--cream-dim); padding: 10px 4px; font-family: var(--sans); font-size: 12.5px; letter-spacing: 0.1em; transition: background 0.25s, color 0.25s, border-color 0.25s; }
.timepick-slot:hover { color: var(--champagne); border-color: var(--line); }
.timepick-slot.on { background: var(--champagne); color: var(--velvet-deep); border-color: var(--champagne); }
.timepick-panel::-webkit-scrollbar { width: 6px; }
.timepick-panel::-webkit-scrollbar-thumb { background: var(--line); }
@media (max-width: 720px) { .timepick-panel { grid-template-columns: repeat(4, 1fr); max-height: 200px; } }

/* ---------- Boot cover ---------- */
.page-boot { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: var(--velvet-deep); transition: opacity .3s ease; }
.page-boot.gone { opacity: 0; pointer-events: none; }
.boot-mark { position: relative; width: 150px; height: 150px; display: grid; place-items: center; }
.boot-mark img { width: 110px; height: auto; }
.boot-ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--line-soft); border-top-color: var(--champagne); animation: bootSpin 1.1s linear infinite; }
@keyframes bootSpin { to { transform: rotate(360deg); } }

/* ---------- Marketing ---------- */
.promo-banner { position: fixed; inset: 0 0 auto 0; z-index: 70; background: var(--champagne); border-bottom: 1px solid rgba(36, 7, 13, 0.2); overflow: hidden; padding: 9px 0; }
.promo-track { display: flex; width: max-content; animation-name: promo-scroll; animation-timing-function: linear; animation-iteration-count: infinite; will-change: transform; }
.promo-banner:hover .promo-track { animation-play-state: paused; }
.promo-banner-text { flex: none; white-space: nowrap; padding-right: 5rem; color: var(--velvet-deep); font-family: var(--sans); font-size: 11.5px; letter-spacing: 0.24em; text-decoration: none; text-transform: uppercase; }
a.promo-banner-text:hover { color: var(--velvet-glow); }
@keyframes promo-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 860px) { .promo-banner { padding: 8px 14px; } }
.promo-notice { display: block; margin: 0 auto 28px; max-width: 660px; border: 1px solid var(--rule-on-ivory); color: var(--ink); padding: 12px 28px; font-family: var(--sans); text-align: center; font-size: 11.5px; letter-spacing: 0.2em; text-transform: uppercase; }
.promo-notice.hidden { display: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) { .spaces-grid { grid-template-columns: repeat(3, 1fr); } .carte-section { grid-template-columns: 1fr; } }
/* Seven links plus the switch, FAQ, the booking button and the account links
   do not fit a laptop bar. Below this the whole lot moves into the burger panel. */
@media (max-width: 1340px) {
  .nav-logo img { height: 40px; }
  .nav.scrolled .nav-logo img { height: 36px; }
  .nav-links {
    position: fixed; inset: 0; height: 100svh;
    background: var(--velvet-deep);
    flex-direction: column; justify-content: center; align-items: center; gap: 22px;
    clip-path: inset(0 0 0 100%); visibility: hidden;
    transition: clip-path 0.55s var(--ease), visibility 0s 0.55s;
    grid-column: auto; grid-row: auto; z-index: 65; list-style: none;
  }
  .nav-links.open { clip-path: inset(0); visibility: visible; transition: clip-path 0.55s var(--ease); }
  .nav-links a { font-size: 15px; letter-spacing: 0.32em; text-indent: 0.32em; color: var(--cream); }
  .nav-links .nav-cta { padding: 14px 30px !important; }
  .nav-links li { width: 100%; text-align: center; opacity: 0; transform: translateY(14px); }
  .nav-links .lang-switch { display: inline-flex; }
  .nav-links.open li { animation: navItemIn 0.55s var(--ease) forwards; }
  .nav-links.open li:nth-child(1) { animation-delay: 0.08s; }
  .nav-links.open li:nth-child(2) { animation-delay: 0.14s; }
  .nav-links.open li:nth-child(3) { animation-delay: 0.2s; }
  .nav-links.open li:nth-child(4) { animation-delay: 0.26s; }
  .nav-links.open li:nth-child(5) { animation-delay: 0.32s; }
  .nav-links.open li:nth-child(6) { animation-delay: 0.38s; }
  .nav-links.open li:nth-child(7) { animation-delay: 0.44s; }
  .nav-links.open li:nth-child(8) { animation-delay: 0.5s; }
  .nav-links.open li:nth-child(9) { animation-delay: 0.56s; }
  .nav-links.open li:nth-child(10) { animation-delay: 0.62s; }
  .nav-right { display: none; }
  .nav-links .mobile-only { display: block; }
  .burger { display: block; }
  .nav-simple .nav-links { position: static; height: auto; background: none; flex-direction: row; clip-path: none; visibility: visible; gap: 18px; z-index: auto; }
  .nav-simple .nav-links li { opacity: 1; transform: none; }
  .nav-simple .nav-links a { font-size: 10.5px; letter-spacing: 0.2em; text-indent: 0.2em; }
}
@media (max-width: 900px) {
  /* Stacked, the overlapping pair reads as one picture on top of another.
     Side by side they stay two pictures. */
  .about-images { display: grid; grid-template-columns: 1.15fr 1fr; gap: 14px; align-items: end; padding-bottom: 0; }
  .about-images .img-main { width: 100%; }
  .about-images .img-accent { position: static; width: 100%; }
  .about-grid, .info-grid, .reserve-panel { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  #map { min-height: 340px; }
  .footer-grid { grid-template-columns: 1fr; gap: 34px; }
  .contact-band { background-attachment: scroll; }
}
@media (min-width: 901px) { .nav-links .mobile-only { display: none; } }
@media (max-width: 560px) {
  .spaces-grid { grid-template-columns: 1fr; }
  .space-card img { aspect-ratio: 4 / 3; }
  .hero-actions .btn { width: 100%; text-align: center; }
  .hero-mark { width: 74vw; }
  /* The price stays on the name's first line. The line used to be allowed
     to wrap, and beside a picture a long name pushed the price down onto a
     line of its own, under the name. Now the name is the part that gives:
     it wraps inside its own box and the price holds its place at the right. */
  .menu-item { flex-wrap: nowrap; align-items: baseline; }
  .menu-entry { gap: 11px; }
  .mi-pic { width: 58px; height: 58px; margin-top: 5px; border-radius: 10px; }
  .menu-item .mi-name { white-space: normal; max-width: none; flex: 1 1 auto; min-width: 0; }
  .menu-item .mi-dots { flex: 0 1 18px; min-width: 12px; }
  .menu-item .mi-price { flex: none; }
  .section-title { font-size: 34px; }
}
@media (max-width: 720px) {
  .account-main { padding: calc(110px + var(--promo-h, 0px)) 0 50px; min-height: auto; }
  .nav-auth { padding: 8px 14px !important; font-size: 10.5px; }
  .auth-card { padding: 28px 22px; }
  #signupForm { grid-template-columns: 1fr; }
  .member-head { flex-direction: column; align-items: flex-start; }
  .member-grid { grid-template-columns: 1fr; }
  .account-main .member-block, .account-main .member-block + .member-block { padding: 26px 0 28px; border-left: 0; }
  .account-main .member-block + .member-block { border-top: 1px solid var(--line-soft); }
  .res-card { flex-wrap: wrap; gap: 6px 14px; }
  .res-when { flex-basis: 100%; flex-wrap: wrap; gap: 4px 12px; }
  .contact-band { padding: 72px 0; }
  .contact-actions .btn { width: 100%; }
}
@media (max-height: 900px) { .account-main { align-items: flex-start; padding-top: calc(104px + var(--promo-h, 0px)); } }

/* Someone who asked their system for less motion gets the content, not the
   choreography. Without this the page reads as blank until it animates in. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal, .reveal-left { opacity: 1; transform: none; filter: none; }
  .hero-content > * { opacity: 1; filter: none; }
  .hero video { display: none; }
}

/* ---------- Booking switched off ---------- */
.bookings-off .reserve-section,
.bookings-off .nav-cta,
.bookings-off a[href$="#reserve"],
.bookings-off li:has(> a[href$="#reserve"]) { display: none !important; }
.bookings-off .contact-actions .btn.ghost { margin: 0 auto; }

/* ---------- The carte's own language ---------- */
/* ---------- The carte's own language ----------
   Three uppercase words used to float here with nothing to say what they
   were: the only thing naming them was an aria-label, which a sighted guest
   never sees. A globe, the words "La carte en" in whichever language is
   being read, and a track of three with the chosen one filled, exactly as
   the step being stood on is filled in the trail. */
.carte-lang {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 10px 14px; margin: -18px 0 34px;
}
.cl-label { display: inline-flex; align-items: center; color: var(--para); }
.cl-globe { width: 16px; height: 16px; flex: none; opacity: .75; }
.cl-track {
  display: inline-flex; padding: 3px; gap: 3px; border-radius: 999px;
  background: rgba(255, 255, 255, .72);
  /* 3.95:1 on the page: a control's boundary needs 3:1 to read as one. */
  border: 1px solid rgba(42, 10, 16, .55);
}
.cl-track button {
  appearance: none; border: 0; cursor: pointer; border-radius: 999px;
  padding: 7px 15px; min-height: 32px;
  font-family: var(--sans); font-weight: 700; font-size: 11px;
  letter-spacing: .13em; text-transform: uppercase;
  background: transparent; color: var(--ink);
  transition: background .25s ease, color .25s ease;
}
.cl-track button:hover { background: rgba(42, 10, 16, .08); }
.cl-track button.active {
  background: var(--velvet); color: var(--champagne-lit);
}
.cl-track button:focus-visible { outline: 2px solid var(--brass-strong); outline-offset: 2px; }
@media (hover: none) {
  .cl-track button:hover { background: transparent; }
  .cl-track button.active:hover { background: var(--velvet); }
}
@media (max-width: 560px) {
  .carte-lang { margin: -12px 0 26px; gap: 8px 10px; }
  .cl-globe { width: 14px; height: 14px; }
  .cl-track button { padding: 6px 11px; font-size: 10px; letter-spacing: .08em; min-height: 30px; }
}


/* ---------- Booking taken on WhatsApp ---------- */
.btn.wa-btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; background: var(--wa); color: var(--velvet-deep); border-color: var(--wa); text-indent: 0; }
.btn.wa-btn:hover, .btn.wa-btn:focus-visible { background: #1fb85a; color: var(--velvet-deep); }
.btn.wa-btn svg { width: 1.2em; height: 1.2em; fill: currentColor; flex: none; }
.btn.wa-btn.incomplete { opacity: .5; }


/* ==========================================================================
   The portal: the landing screen and the pages it opens.

   The full site at /home is a long read. This is the opposite: one screen, a
   film of the room behind it, and seven doors. Same velvet, same champagne,
   same hairlines, so the two halves are recognisably one house.
   ========================================================================== */

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.page-portal { background: var(--velvet-deep); min-height: 100svh; display: flex; flex-direction: column; }

/* The film, fixed behind everything, under a velvet veil so type reads */
.portal-bg { position: fixed; inset: 0; z-index: 0; background: var(--velvet-deep); overflow: hidden; }
.portal-bg video, .portal-bg img { width: 100%; height: 100%; object-fit: cover; }
/* The film is the point, and the doors have to be readable over it. The tint
   was 0.3 when the film here was a dim one; the venue own footage is a lit
   room with magenta on the walls and a fire number at 0:26, and over that
   the 12px door labels measured 1.99:1. Tuned by measurement to 0.52, where
   the worst frame of the film reaches 4.99:1. Nothing here blurs; the middle
   of the frame is the film as shot. */
.portal-bg::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: var(--velvet); mix-blend-mode: multiply; opacity: 0.52;
}
.portal-bg::after {
  content: ''; position: absolute; inset: 0; z-index: 2;
  background:
    linear-gradient(180deg, rgba(36, 7, 13, 0.62) 0%, rgba(36, 7, 13, 0.12) 26%, rgba(36, 7, 13, 0.1) 60%, rgba(36, 7, 13, 0.82) 100%);
}
/* The doors sit over the film itself, so they carry velvet behind the
   hairline. The labels are 12px and regular weight, so they need the full
   4.5:1 and not the 3:1 that large text may rest on. Raising this alone did
   not carry the fire number; dimming the film did, and the plate stays at
   the breath it was meant to be. */
.lbtn { background-color: rgba(36, 7, 13, 0.52); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.landing-foot, .landing-seo p { text-shadow: 0 1px 14px rgba(36, 7, 13, 0.9); }

/* ---------- The bar: drawer, mark, language ---------- */
.portal-bar { position: relative; z-index: 20; padding: 18px 0 6px; }
/* The happy hour strip is fixed at the top; the bar starts below it */
.page-portal.has-promo .portal-bar { padding-top: calc(18px + var(--promo-h, 0px)); }
.pbar-inner {
  width: min(1180px, 92vw); margin: 0 auto;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px;
}
.pbar-burger {
  width: 42px; height: 34px; position: relative; background: none; border: 0; padding: 0;
  justify-self: start;
}
.pbar-burger span {
  position: absolute; left: 4px; right: 4px; height: 1px; background: var(--champagne);
  transition: transform 0.45s var(--ease), opacity 0.3s var(--ease);
}
.pbar-burger span:nth-child(1) { top: 9px; }
.pbar-burger span:nth-child(2) { top: 16px; }
.pbar-burger span:nth-child(3) { top: 23px; }
.pbar-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.pbar-burger.open span:nth-child(2) { opacity: 0; }
.pbar-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.pbar-mark { justify-self: center; display: block; }
.pbar-mark img { width: clamp(150px, 26vw, 230px); height: auto; }
.pbar-right { justify-self: end; display: flex; align-items: center; gap: 14px; }
.pbar-lang { display: flex; align-items: center; }
.pbar-lang button {
  background: none; border: 0; color: var(--cream-dim);
  font-family: var(--sans); font-size: 10.5px; letter-spacing: 0.2em; padding: 6px 7px;
  transition: color 0.35s;
}
.pbar-lang button + button { border-left: 1px solid var(--line); }
.pbar-lang button.active { color: var(--champagne); }
.pbar-faq {
  border: 1px solid var(--champagne-dim); border-radius: 999px; color: var(--champagne);
  font-family: var(--sans); font-size: 10.5px; letter-spacing: 0.2em; text-indent: 0.2em;
  padding: 7px 16px; white-space: nowrap; transition: border-color 0.35s, color 0.35s;
}
.pbar-faq:hover { border-color: var(--champagne); color: var(--champagne-lit); }
/* A phone has no room for the language and FAQ side by side beside the mark */
@media (max-width: 560px) {
  .pbar-right { flex-direction: column; align-items: flex-end; gap: 6px; }
  .pbar-faq { padding: 6px 13px; }
}

/* The drawer slides the width of a column on a desktop, the screen on a phone */
.pdrawer {
  position: fixed; inset: 0 auto 0 0; z-index: 80;
  width: min(420px, 100vw);
  background: rgba(36, 7, 13, 0.97);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border-right: 1px solid var(--line);
  padding: 96px 0 34px;
  display: flex; flex-direction: column; justify-content: space-between;
  transform: translateX(-102%);
  transition: transform 0.55s var(--ease);
  overflow-y: auto;
}
.drawer-open .pdrawer { transform: none; }
/* The drawer's own close button, top right inside it */
.pdrawer-close {
  position: absolute; top: 26px; right: 22px;
  width: 44px; height: 44px; display: grid; place-items: center; padding: 0;
  background: none; border: 1px solid var(--champagne-dim); border-radius: 50%;
  color: var(--champagne); cursor: pointer; transition: border-color 0.3s, background 0.3s;
}
.pdrawer-close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.pdrawer-close:hover { border-color: var(--champagne); background: rgba(233, 216, 166, 0.08); }
.pdrawer-close:focus-visible { outline: 2px solid var(--champagne-lit); outline-offset: 3px; }
/* Covers the dimmed page while the drawer is open, so a tap beside it closes it */
.pdrawer-scrim { position: fixed; inset: 0; z-index: 79; display: none; }
.drawer-open .pdrawer-scrim { display: block; }
.pdrawer-list { list-style: none; display: grid; }
.pdrawer-list a {
  display: block; padding: 13px clamp(28px, 6vw, 52px);
  font-family: var(--display); font-size: clamp(20px, 3.4vw, 26px);
  color: var(--cream); line-height: 1.2;
  opacity: 0; transform: translateX(-14px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease), color 0.3s;
}
.drawer-open .pdrawer-list a { opacity: 1; transform: none; }
.pdrawer-list a:hover { color: var(--champagne); }
.pdrawer-foot {
  padding: 22px clamp(28px, 6vw, 52px) 0; margin-top: 20px;
  border-top: 1px solid var(--line-soft);
  display: grid; gap: 4px;
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--champagne-dim);
}
.pdrawer-foot a:hover { color: var(--champagne); }
/* The screen behind the drawer dims rather than disappearing */
.drawer-open .portal-bar, .drawer-open main, .drawer-open .portal-foot { filter: brightness(0.45); }
.drawer-open body { overflow: hidden; }

/* ---------- The landing screen ---------- */
.landing {
  position: relative; z-index: 10; flex: 1;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  padding: 24px 0 40px;
}
.landing-menu {
  width: min(560px, 88vw); display: grid; gap: 11px;
}
.lbtn {
  display: block; text-align: center;
  padding: 18px 22px;
  border: 1px solid var(--champagne-dim); border-radius: 999px;
  background: linear-gradient(to top, var(--champagne) 50%, transparent 50%) no-repeat;
  background-size: 100% 202%; background-position: 0 0;
  color: var(--champagne);
  font-family: var(--sans); font-size: 12px; font-weight: 400;
  text-transform: uppercase; letter-spacing: 0.22em; text-indent: 0.22em;
  transition: background-position 0.55s var(--ease), color 0.4s var(--ease),
    border-color 0.4s var(--ease), box-shadow 0.55s var(--ease);
  /* each one comes up out of the dark, in turn */
  opacity: 0; filter: blur(8px);
  animation: dawn 1.1s var(--ease) forwards;
}
.lbtn:nth-child(1) { animation-delay: 0.12s; }
.lbtn:nth-child(2) { animation-delay: 0.2s; }
.lbtn:nth-child(3) { animation-delay: 0.28s; }
.lbtn:nth-child(4) { animation-delay: 0.36s; }
.lbtn:nth-child(5) { animation-delay: 0.44s; }
.lbtn:nth-child(6) { animation-delay: 0.52s; }
.lbtn:nth-child(7) { animation-delay: 0.6s; }
.lbtn-age { color: #ff4d4f; margin-left: 0.35em; font-weight: 700; letter-spacing: 0.12em; text-indent: 0; transition: color 0.4s var(--ease); }
.lbtn:hover .lbtn-age { color: #b3121f; }
.lbtn:hover {
  background-position: 0 100%; color: var(--velvet-deep); border-color: var(--champagne);
  box-shadow: 0 0 0 1px rgba(233, 216, 166, 0.2), 0 12px 44px rgba(233, 216, 166, 0.18);
}
.landing-foot {
  display: flex; align-items: center; gap: 16px; margin-top: 34px;
  font-size: 11px; letter-spacing: 0.24em; color: var(--champagne-dim);
  opacity: 0; animation: dawn 1.2s var(--ease) 0.75s forwards;
}
.landing-foot i { display: block; width: 44px; height: 1px; background: var(--champagne-dim); }
.landing-foot a:hover { color: var(--champagne); }

/* Changing the film behind the day card should read as the room changing, not
   as a page reloading, so it dips rather than cuts. */
.portal-bg video { transition: opacity 0.45s var(--ease); }
.portal-bg video.swapping { opacity: 0; }

/* The sound button for the background film. It sits in the corner out of the
   way of the doors, on the same hairline-and-champagne terms as everything
   else on this screen. */
.film-sound {
  position: fixed; right: clamp(14px, 3vw, 26px); bottom: clamp(14px, 3vw, 26px); z-index: 60;
  width: 46px; height: 46px; display: grid; place-items: center;
  background: rgba(20, 4, 8, 0.55); border: 1px solid var(--line); border-radius: 50%;
  color: var(--champagne-dim); cursor: pointer;
  opacity: 0; animation: dawn 1.2s var(--ease) 1.1s forwards;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.film-sound svg { width: 22px; height: 22px; fill: currentColor; }
.film-sound:hover { color: var(--champagne); border-color: var(--champagne-dim); background: rgba(20, 4, 8, 0.72); }
.film-sound.on { color: var(--champagne); border-color: var(--champagne-dim); }
@media (prefers-reduced-motion: reduce) { .film-sound { opacity: 1; animation: none; } }

/* The marks sit bare on the film, the way they do in the footer of the full
   site. The drop shadow is the same trick the line above uses to stay legible
   over a moving picture, not decoration. */
.landing-socials {
  display: flex; gap: 22px; margin-top: 24px;
  opacity: 0; animation: dawn 1.2s var(--ease) 0.9s forwards;
}
.landing-socials a { display: block; width: 30px; height: 30px; transition: transform 0.35s var(--ease), filter 0.35s var(--ease); }
.landing-socials a img { width: 100%; height: 100%; object-fit: contain; display: block; filter: drop-shadow(0 1px 12px rgba(36, 7, 13, 0.9)); }
.landing-socials a:hover { transform: translateY(-2px); filter: brightness(1.12); }
@media (max-width: 640px) { .landing-socials { gap: 26px; margin-top: 20px; } .landing-socials a { width: 32px; height: 32px; } }

/* ---------- Shared furniture on the pages the landing opens ---------- */
.portal-kicker {
  font-family: var(--sans); font-size: 10.5px; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--champagne-dim); text-align: center;
}
.portal-title {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(34px, 5vw, 62px); color: var(--champagne);
  text-align: center; margin-top: 12px; padding-bottom: 22px; position: relative;
}
.portal-title::after {
  content: ''; position: absolute; left: 50%; transform: translateX(-50%); bottom: 0;
  width: 62px; height: 1px; background: var(--champagne-dim);
}
.portal-foot {
  position: relative; z-index: 10;
  border-top: 1px solid var(--line-soft);
  padding: 22px clamp(18px, 5vw, 44px);
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 11px; letter-spacing: 0.14em; color: var(--cream-dim);
}
.portal-foot a:hover { color: var(--champagne); }

/* ---------- The nights ---------- */
.nights {
  position: relative; z-index: 10; flex: 1;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  padding: 30px 20px 50px; text-align: center;
}
.day-pick { display: flex; align-items: center; gap: clamp(12px, 3vw, 28px); margin-top: clamp(30px, 6vw, 54px); }
.day-arrow {
  width: 54px; height: 54px; flex: none; display: grid; place-items: center;
  background: none; border: 1px solid var(--line); border-radius: 50%;
  color: var(--champagne); transition: 0.35s var(--ease);
}
.day-arrow svg { width: 22px; height: 22px; fill: currentColor; }
.day-arrow:hover { border-color: var(--champagne); background: var(--champagne); color: var(--velvet-deep); }
.day-card {
  width: min(460px, 74vw); min-height: 220px;
  display: grid; align-content: center; gap: 12px;
  padding: 34px 28px;
  background: rgba(36, 7, 13, 0.55);
  border: 1px solid var(--line); border-radius: 22px;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: var(--cream); text-align: center;
  transition: border-color 0.45s var(--ease), box-shadow 0.55s var(--ease), background 0.45s;
}
.day-card:hover {
  border-color: var(--champagne);
  box-shadow: 0 0 0 1px rgba(233, 216, 166, 0.16), 0 18px 60px rgba(233, 216, 166, 0.12);
}
.day-card.turn .day-name, .day-card.turn .day-note { animation: dawn 0.7s var(--ease) both; }
.day-name {
  font-family: var(--display); font-size: clamp(34px, 6vw, 54px); color: var(--champagne); line-height: 1;
}
.day-note { font-family: var(--serif); font-size: 17px; color: var(--cream-dim); line-height: 1.4; min-height: 1.4em; }
.day-open {
  display: inline-block; justify-self: center; margin-top: 12px;
  padding: 13px 28px; border-radius: 999px;
  background: var(--champagne); color: var(--velvet-deep);
  font-family: var(--sans); font-size: 10.5px; letter-spacing: 0.26em; text-indent: 0.26em; text-transform: uppercase;
  transition: background 0.35s var(--ease), box-shadow 0.5s var(--ease);
}
.day-card:hover .day-open { background: var(--champagne-lit); box-shadow: 0 0 0 1px rgba(233, 216, 166, 0.25), 0 10px 36px rgba(233, 216, 166, 0.22); }
.day-dots { display: flex; gap: 7px; justify-content: center; margin-top: 26px; }
.day-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--line); display: block; }
.day-dots i.on { background: var(--champagne); }
.nights-hours {
  display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 28px;
  font-size: 11px; letter-spacing: 0.26em; color: var(--champagne-dim);
}
.nights-hours i { display: block; width: 44px; height: 1px; background: var(--champagne-dim); }

/* The slider the card opens */
.showbox {
  position: fixed; inset: 0; z-index: 120; background: #150307;
  display: grid; grid-template-rows: auto 1fr auto; align-items: center;
  opacity: 0; pointer-events: none; transition: opacity 0.4s var(--ease);
}
.showbox.open { opacity: 1; pointer-events: auto; }
.showbox-head {
  display: flex; align-items: center; gap: 16px;
  padding: 18px clamp(16px, 4vw, 34px);
  border-bottom: 1px solid var(--line-soft);
}
.showbox-day { font-family: var(--display); font-size: 22px; color: var(--champagne); }
.showbox-count { font-size: 11px; letter-spacing: 0.2em; color: var(--cream-dim); }
.showbox-close {
  margin-left: auto; width: 44px; height: 44px; display: grid; place-items: center;
  background: none; border: 1px solid var(--line); border-radius: 50%; color: var(--champagne);
  font-size: 16px; transition: 0.3s;
}
.showbox-close:hover { background: var(--champagne); color: var(--velvet-deep); }
.showbox-stage {
  grid-row: 2; position: relative; display: grid; place-items: center;
  min-height: 0; height: 100%;
}
/* The film takes the whole row the stage gives it. No fixed height cap, so a
   portrait clip runs floor to ceiling and a landscape one edge to edge, and
   the only empty velvet left is what the aspect ratio itself asks for. The
   side padding keeps the arrows off the picture on a wide screen. */
.showbox-media {
  position: absolute; inset: 0; margin: auto;
  width: auto; height: auto;
  max-width: calc(100% - 2 * clamp(76px, 9vw, 110px));
  max-height: calc(100% - 24px);
  border-radius: 10px;
}
.showbox-empty { color: var(--cream-dim); font-family: var(--serif); font-size: 18px; }
.showbox-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 52px; height: 52px; display: grid; place-items: center;
  background: rgba(36, 7, 13, 0.7); border: 1px solid var(--line); border-radius: 50%;
  color: var(--champagne); transition: 0.3s;
}
.showbox-arrow svg { width: 22px; height: 22px; fill: currentColor; }
.showbox-arrow:hover { background: var(--champagne); color: var(--velvet-deep); }
.showbox-arrow.prev { left: clamp(10px, 3vw, 34px); }
.showbox-arrow.next { right: clamp(10px, 3vw, 34px); }
.showbox-caption {
  grid-row: 3; text-align: center; padding: 16px clamp(16px, 4vw, 34px) 26px;
  font-family: var(--serif); font-size: 16px; color: var(--cream-dim);
}
@media (max-width: 640px) {
  .day-card { width: min(460px, 66vw); min-height: 200px; padding: 28px 18px; }
  .day-arrow { width: 44px; height: 44px; }
  /* On a phone the arrows ride over the edges of the picture rather than
     taking a band of their own under it, which is where the empty space
     was going. Head and caption give up their padding to the film too. */
  .showbox-head { padding: 12px 16px; }
  .showbox-day { font-size: 19px; }
  .showbox-media { max-width: calc(100% - 16px); max-height: calc(100% - 12px); }
  .showbox-arrow {
    width: 42px; height: 42px; top: 50%; bottom: auto; transform: translateY(-50%);
    background: rgba(20, 4, 8, 0.58);
  }
  .showbox-arrow.prev { left: 6px; }
  .showbox-arrow.next { right: 6px; }
  .showbox-caption { padding: 10px 16px 16px; font-size: 14.5px; line-height: 1.42; }
}

/* ---------- The sheets: happy hour, casino, 3D ---------- */
.page-sheet { background: var(--velvet); }
.sheet { position: relative; z-index: 10; flex: 1; width: min(1100px, 92vw); margin: 0 auto; padding: 10px 0 60px; }
.sheet-head { text-align: center; margin-bottom: clamp(30px, 5vw, 50px); }
.sheet-lead {
  font-family: var(--serif); font-weight: 300; font-size: 18px; line-height: 1.66;
  color: var(--cream-dim); max-width: 62ch; margin: 22px auto 0; text-align: center;
}
.sheet-hero { position: relative; margin: 14px 0 clamp(30px, 5vw, 48px); border-radius: 18px; overflow: hidden; }
.sheet-hero img { width: 100%; height: clamp(240px, 38vw, 420px); object-fit: cover; }
.sheet-hero::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(36, 7, 13, 0.4), rgba(36, 7, 13, 0.92));
}
.sheet-hero-copy { position: absolute; left: 0; right: 0; bottom: clamp(20px, 4vw, 40px); z-index: 2; }
.sheet-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line-soft); margin: clamp(30px, 5vw, 48px) 0; }
.sheet-card { background: var(--velvet); padding: clamp(24px, 3vw, 34px); }
.sheet-card h2 { font-family: var(--display); font-size: 22px; color: var(--champagne); margin-bottom: 10px; }
.sheet-card p { font-family: var(--serif); font-weight: 300; font-size: 16.5px; line-height: 1.6; color: var(--cream-dim); }
.sheet-shots { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: clamp(26px, 4vw, 40px) 0; }
.sheet-shots img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; }
.sheet-note { text-align: center; font-size: 12.5px; color: var(--cream-dim); opacity: 0.8; margin: 26px auto 0; max-width: 60ch; }
.sheet-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: clamp(28px, 4vw, 44px); }
@media (max-width: 760px) {
  .sheet-grid, .sheet-shots { grid-template-columns: 1fr; }
  .sheet-actions .btn { width: 100%; }
}

/* ---------- Happy hour ---------- */
.happy-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: clamp(26px, 4vw, 42px); }
.happy-card { margin: 0; border: 1px solid var(--line-soft); border-radius: 16px; overflow: hidden; background: rgba(36, 7, 13, 0.5); }
.happy-card img { width: 100%; aspect-ratio: 4 / 5; height: auto; object-fit: cover; }
.happy-card figcaption { display: grid; gap: 8px; padding: 22px clamp(18px, 2.4vw, 28px) 26px; }
.happy-card b { font-family: var(--display); font-weight: 500; font-size: 21px; color: var(--champagne); }
.happy-card span { font-family: var(--serif); font-weight: 300; font-size: 16px; line-height: 1.55; color: var(--cream-dim); }
.happy-price {
  font-family: var(--sans) !important; font-size: 13px !important; letter-spacing: 0.2em;
  color: var(--champagne) !important;
}
.happy-card-wide { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1.1fr; align-items: stretch; }
.happy-card-wide img { height: 100%; min-height: 260px; aspect-ratio: auto; object-fit: cover; object-position: center 40%; }
.happy-list { list-style: none; display: grid; gap: 8px; margin: 4px 0 6px; }
.happy-list li { display: flex; align-items: baseline; gap: 10px; font-family: var(--sans); font-size: 13px; letter-spacing: 0.06em; color: var(--cream); }
.happy-list i { flex: 1; border-bottom: 1px dotted rgba(233, 216, 166, 0.3); transform: translateY(-4px); }
@media (max-width: 760px) {
  .happy-grid { grid-template-columns: 1fr; }
  .happy-card-wide { grid-template-columns: 1fr; }
  .happy-card-wide img { min-height: 220px; height: clamp(220px, 46vw, 300px); }
}

/* ---------- The wheel ---------- */
.page-wheel { background: var(--velvet); }
.wheel-page { position: relative; z-index: 10; flex: 1; width: min(1100px, 92vw); margin: 0 auto; padding: 10px 0 60px; }
.wheel-lead {
  font-family: var(--serif); font-weight: 300; font-size: 18px; line-height: 1.6;
  color: var(--cream-dim); max-width: 56ch; margin: 22px auto 0; text-align: center;
}
.wheel-stage {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 70px);
  align-items: center; margin-top: clamp(30px, 5vw, 50px);
}
.wheel-wrap { position: relative; display: grid; place-items: center; }
.wheel-svg { width: min(420px, 78vw); height: auto; transform: rotate(0deg); }
.wseg.a { fill: #4d1019; }
.wseg.b { fill: #24070d; }
.wseg.n { fill: #1a0509; }
.wlabel.none { fill: rgba(233, 216, 166, 0.55); font-size: 6.4px; }
.wseg { stroke: rgba(233, 216, 166, 0.35); stroke-width: 0.6; }
.wlabel {
  fill: #e9d8a6; font-family: 'Cocogoose', 'Segoe UI', sans-serif; font-size: 6.6px;
  letter-spacing: 0.04em;
}
.wring { fill: none; stroke: var(--champagne); stroke-width: 1.4; }
/* The marker the wheel stops under */
.wheel-pin {
  position: absolute; top: -6px; left: 50%; transform: translateX(-50%);
  width: 0; height: 0; z-index: 2;
  border-left: 11px solid transparent; border-right: 11px solid transparent;
  border-top: 20px solid var(--champagne);
  filter: drop-shadow(0 3px 10px rgba(20, 4, 8, 0.6));
}
.wheel-hub {
  position: absolute; width: 23%; aspect-ratio: 1; border-radius: 50%;
  background: var(--velvet-deep); border: 1px solid var(--champagne);
  display: grid; place-items: center; pointer-events: none;
}
.wheel-hub img { width: 56%; height: auto; }
.wheel-wrap.won { animation: wheelWon 1.6s var(--ease); }
@keyframes wheelWon {
  0%, 100% { filter: none; }
  40% { filter: drop-shadow(0 0 34px rgba(233, 216, 166, 0.55)); }
}
.wheel-form { display: grid; gap: 4px; align-content: center; }
.wheel-form .btn { margin-top: 22px; }
.wheel-result {
  margin-top: clamp(30px, 5vw, 46px); text-align: center;
  border-top: 1px solid var(--line); padding-top: clamp(26px, 4vw, 40px);
}
.wheel-won { font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--champagne-dim); }
.wheel-prize {
  font-family: var(--display); font-size: clamp(30px, 5vw, 50px); color: var(--champagne);
  margin: 12px 0 14px;
}
.wheel-claim { font-family: var(--serif); font-weight: 300; font-size: 17px; color: var(--cream-dim); max-width: 52ch; margin: 0 auto; }
@media (max-width: 860px) { .wheel-stage { grid-template-columns: 1fr; } }

/* ---------- The 3D tour ---------- */
.page-tour { background: var(--velvet); }
.tour { position: relative; z-index: 10; flex: 1; width: min(1200px, 94vw); margin: 0 auto; padding: 10px 0 60px; }
.tour-head { text-align: center; }
.tour-lead {
  font-family: var(--serif); font-weight: 300; font-size: 18px; line-height: 1.6;
  color: var(--cream-dim); max-width: 60ch; margin: 22px auto 0;
}
.tour-frame {
  position: relative; margin: clamp(28px, 4vw, 44px) 0;
  aspect-ratio: 16 / 9; width: 100%;
  border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
  background: var(--velvet-deep);
}
.tour-embed { width: 100%; height: 100%; border: 0; display: block; }
.tour-wait { position: absolute; inset: 0; display: grid; place-items: center; }
.tour-film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.5; }
.tour-wait-copy { position: relative; z-index: 2; display: grid; gap: 18px; justify-items: center; text-align: center; padding: 24px; }
.tour-wait-copy p { font-family: var(--serif); font-size: 18px; color: var(--cream); max-width: 40ch; }
.tour-tips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line-soft); }
.tour-tips > div { background: var(--velvet); padding: 20px 22px; display: grid; gap: 6px; }
.tour-tips b { font-family: var(--sans); font-size: 10.5px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--champagne); }
.tour-tips span { font-family: var(--serif); font-size: 15.5px; color: var(--cream-dim); }
@media (max-width: 760px) { .tour-tips { grid-template-columns: 1fr; } .tour-frame { aspect-ratio: 4 / 3; } }

/* A field for bots only: off screen for people, still in the form */
.hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- The booking page ---------- */
/* The request on the left, everything a guest checks before sending it on the
   right: phone, WhatsApp, hours, the minimum table, the address and the map.
   On a phone the form comes first, since it is what the page is for. */
.page-book { background: var(--velvet); }
.book-page {
  position: relative; z-index: 10; flex: 1; width: min(1360px, 94vw); margin: 0 auto;
  padding: 10px 0 70px;
}
.book-copy { text-align: center; }
.book-lead {
  font-family: var(--serif); font-weight: 300; font-size: 18px; line-height: 1.62;
  color: var(--cream-dim); margin: 20px auto 0; max-width: 620px;
}
.book-grid {
  display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 24px;
  /* Both columns end on the same line: the map takes whatever the form is taller by */
  align-items: stretch; margin-top: clamp(24px, 3vw, 38px);
}
/* A scrolling day strip must not widen its column past the screen */
.book-grid > * { min-width: 0; }
.book-card {
  border: 1px solid var(--line); border-radius: 22px; padding: clamp(20px, 2.6vw, 30px);
  background: rgba(20, 4, 8, 0.3);
}
.bk-title { font-size: clamp(26px, 2.4vw, 32px); line-height: 1.15; }
.bk-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; margin-top: 22px; }
@media (min-width: 1100px) {
  .bk-fields { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.35fr) minmax(0, 0.9fr); }
}
.bk-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.bk-field > label, .bk-set legend {
  font-family: var(--sans); font-size: 12px; letter-spacing: 0.06em; color: var(--cream);
}
.bk-field input, .bk-field select, .bk-field textarea {
  width: 100%; height: 48px; padding: 0 14px; border: 1px solid var(--line); border-radius: 12px;
  background: rgba(243, 233, 216, 0.05); color: var(--cream);
  font-family: var(--serif); font-size: 16px; color-scheme: dark; outline: none;
  transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease);
}
.bk-field input:focus, .bk-field select:focus, .bk-field textarea:focus { border-color: var(--champagne); background: rgba(243, 233, 216, 0.08); }
.bk-field input::placeholder, .bk-field textarea::placeholder { color: rgba(243, 233, 216, 0.36); }
.bk-field select {
  appearance: none; -webkit-appearance: none; padding-right: 38px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--champagne) 50%), linear-gradient(135deg, var(--champagne) 50%, transparent 50%);
  background-position: calc(100% - 20px) 54%, calc(100% - 15px) 54%; background-size: 5px 5px; background-repeat: no-repeat;
}
.bk-field select option { background: var(--velvet-deep); color: var(--cream); }
.bk-field textarea { height: auto; min-height: 76px; padding: 12px 14px; line-height: 1.5; resize: vertical; }
.bk-field .field-note { margin-top: 0; font-size: 12px; }
#bNoteField { margin-top: 18px; }

/* Guests: minus, the count, plus, in the same box as the fields beside it */
.bk-step {
  display: grid; grid-template-columns: 46px 1fr 46px; align-items: center; height: 48px;
  border: 1px solid var(--line); border-radius: 12px; background: rgba(243, 233, 216, 0.05); overflow: hidden;
}
.bk-step button {
  height: 100%; border: 0; background: transparent; color: var(--champagne);
  font-family: var(--serif); font-size: 22px; line-height: 1; cursor: pointer;
  transition: background-color 0.25s, color 0.25s;
}
.bk-step button:hover:not(:disabled) { background: rgba(233, 216, 166, 0.12); }
.bk-step button:focus-visible { outline: 2px solid var(--champagne); outline-offset: -2px; }
.bk-step button:disabled { color: rgba(233, 216, 166, 0.25); cursor: not-allowed; }
.bk-step output { text-align: center; font-family: var(--serif); font-size: 16px; color: var(--cream); white-space: nowrap; }

/* The phone: a flag button in front of the number */
.bk-tel { position: relative; display: flex; gap: 8px; }
.bk-tel input { flex: 1; min-width: 0; }
.bk-cc {
  flex: none; display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: 12px; background: rgba(243, 233, 216, 0.05);
  color: var(--cream); font-family: var(--serif); font-size: 15.5px; cursor: pointer;
  transition: border-color 0.3s var(--ease);
}
.bk-cc::after { content: ''; width: 6px; height: 6px; margin-left: 2px; border-right: 1.5px solid var(--champagne); border-bottom: 1.5px solid var(--champagne); transform: translateY(-2px) rotate(45deg); }
.bk-cc:hover, .bk-cc[aria-expanded='true'], .bk-cc:focus-visible { border-color: var(--champagne); outline: none; }
.bk-cc img, .bk-cc-pop img { width: 22px; height: 16px; flex: none; border-radius: 3px; object-fit: cover; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25); }
.bk-cc-pop {
  position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; width: 180px; max-height: 260px; overflow-y: auto;
  list-style: none; margin: 0; padding: 6px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--velvet-deep); box-shadow: 0 24px 50px -20px rgba(0, 0, 0, 0.7); scrollbar-width: thin;
}
.bk-cc-pop[hidden] { display: none; }
.bk-cc-pop li { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 9px; cursor: pointer; color: var(--cream); }
.bk-cc-pop li b { font-family: var(--serif); font-weight: 400; font-size: 15px; }
.bk-cc-pop li:hover, .bk-cc-pop li[aria-selected='true'] { background: rgba(233, 216, 166, 0.12); }

/* Day and time, picked by touch rather than typed */
.bk-set { border: 0; padding: 0; margin: 20px 0 0; min-width: 0; }
.bk-set legend { padding: 0; margin-bottom: 10px; }
.bk-days { display: flex; gap: 7px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.bk-days button {
  flex: none; width: 62px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 9px 4px;
  border: 1px solid var(--line); border-radius: 14px; background: rgba(243, 233, 216, 0.04); color: var(--cream); cursor: pointer;
  transition: border-color 0.25s, background-color 0.25s, color 0.25s;
}
.bk-days small { font-family: var(--sans); font-size: 10px; letter-spacing: 0.06em; color: var(--cream-dim); text-transform: capitalize; }
.bk-days b { font-family: var(--display); font-weight: 500; font-size: 22px; line-height: 1.1; color: var(--champagne); }
.bk-days button:hover:not(:disabled) { border-color: var(--champagne-dim); }
.bk-days button[aria-pressed='true'] { background: var(--champagne); border-color: var(--champagne); }
.bk-days button[aria-pressed='true'] small, .bk-days button[aria-pressed='true'] b { color: var(--velvet-deep); }
.bk-days button:disabled { opacity: 0.4; cursor: not-allowed; }
.bk-slots { display: flex; flex-wrap: wrap; gap: 7px; }
.bk-slots:empty { display: none; }
.bk-slots button {
  padding: 8px 15px; border: 1px solid var(--line); border-radius: 999px; background: transparent;
  color: var(--cream); font-family: var(--serif); font-size: 15px; font-variant-numeric: tabular-nums; cursor: pointer;
  transition: border-color 0.25s, background-color 0.25s, color 0.25s;
}
.bk-slots button:hover { border-color: var(--champagne-dim); }
.bk-slots button[aria-pressed='true'] { background: var(--champagne); border-color: var(--champagne); color: var(--velvet-deep); }
.bk-hint { margin-top: 10px; font-size: 12.5px; color: var(--cream-dim); }
.bk-hint.warn { color: var(--err); }
.bk-days button:focus-visible, .bk-slots button:focus-visible { outline: 2px solid var(--champagne); outline-offset: 2px; }

.bk-foot { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 22px; }
.bk-foot .form-note { margin: 0; max-width: 340px; font-size: 12.5px; line-height: 1.5; }
.bk-foot .form-submit { margin: 0; flex: none; }
.book-card .form-msg { margin-top: 14px; }

/* The side: tiles, then the map */
.book-side { display: flex; flex-direction: column; gap: 12px; }
.bk-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bk-tiles .bk-wide { grid-column: 1 / -1; }
.bk-tile {
  display: flex; align-items: flex-start; gap: 12px; height: 100%; padding: 15px 16px;
  border: 1px solid var(--line); border-radius: 16px; color: inherit; text-decoration: none;
  transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease);
}
a.bk-tile:hover, a.bk-tile:focus-visible { border-color: var(--champagne-dim); background: rgba(243, 233, 216, 0.04); }
.bk-tile svg { flex: none; width: 21px; height: 21px; margin-top: 1px; fill: none; stroke: var(--champagne); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.bk-tile span { display: flex; flex-direction: column; min-width: 0; }
.bk-tile small { font-family: var(--sans); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--champagne-dim); }
.bk-tile b { margin-top: 5px; font-family: var(--serif); font-weight: 400; font-size: 18px; line-height: 1.3; color: var(--champagne); }
.bk-tile em { margin-top: 3px; font-style: normal; font-size: 12.5px; line-height: 1.5; color: var(--cream-dim); }
.bk-map { flex: 1; display: flex; flex-direction: column; min-height: 280px; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; }
.bk-map iframe { display: block; flex: 1; width: 100%; min-height: 240px; border: 0; background: var(--velvet-deep); }
.bk-route {
  display: flex; align-items: center; justify-content: center; gap: 9px; padding: 14px;
  background: var(--champagne); color: var(--velvet-deep); text-decoration: none;
  font-family: var(--sans); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  transition: background-color 0.3s var(--ease);
}
.bk-route svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.bk-route:hover, .bk-route:focus-visible { background: var(--champagne-lit); }

@media (max-width: 960px) {
  .book-grid { grid-template-columns: 1fr; }
  .bk-map iframe { flex: none; height: 300px; }
}
@media (max-width: 560px) {
  .bk-fields { grid-template-columns: 1fr; }
  .bk-foot { flex-direction: column; align-items: stretch; }
  .bk-foot .form-submit .btn { width: 100%; }
  .bk-tiles { grid-template-columns: 1fr; gap: 8px; }
  .bk-tile { padding: 12px 14px; }
  .bk-tile b { font-size: 16.5px; }
  .bk-map iframe { height: 240px; min-height: 0; }
}

/* The portal pages carry the site's reveal setting with them */
@media (prefers-reduced-motion: reduce) {
  .lbtn, .landing-foot, .landing-socials, .day-card.turn .day-name, .day-card.turn .day-note { opacity: 1; filter: none; animation: none; }
  .pdrawer-list a { opacity: 1; transform: none; }
}

/* ---------- The guide: one page per occasion and area ---------- */
.page-guide { background: var(--velvet); }
/* The site-wide section rhythm (a screen of padding and a hairline above every
   section) is for the long page; the guide's blocks carry their own. */
.guide section { padding: 0; }
.guide section::before, .guide section + section::before { display: none; }
.guide { position: relative; z-index: 10; flex: 1; width: min(920px, 92vw); margin: 0 auto; padding: 10px 0 60px; }
.g-crumbs { display: flex; gap: 10px; font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--champagne-dim); margin-bottom: 26px; }
.g-crumbs a:hover { color: var(--champagne); }
.guide .portal-kicker, .guide .portal-title { text-align: left; }
.guide .portal-title { max-width: 18ch; }
.guide .portal-title::after { left: 0; transform: none; }
.g-intro { font-family: var(--serif); font-weight: 300; font-size: 19px; line-height: 1.65; color: var(--cream); margin: 24px 0 10px; max-width: 64ch; }
.guide .sheet-actions { justify-content: flex-start; margin-top: 22px; }
.g-block { margin-top: clamp(38px, 6vw, 60px); padding-top: clamp(26px, 4vw, 36px); border-top: 1px solid var(--line-soft); }
.g-block h2 { font-family: var(--display); font-size: clamp(24px, 3vw, 32px); color: var(--champagne); margin-bottom: 14px; }
.g-block p { font-family: var(--serif); font-weight: 300; font-size: 17px; line-height: 1.65; color: var(--cream-dim); margin-bottom: 10px; max-width: 66ch; }
.g-note { font-family: var(--sans) !important; font-size: 11px !important; letter-spacing: 0.18em; text-transform: uppercase; color: var(--champagne-dim) !important; }
.g-why { list-style: none; display: grid; gap: 8px; }
.g-why li { position: relative; padding-left: 20px; font-family: var(--serif); font-weight: 300; font-size: 17px; color: var(--cream-dim); line-height: 1.55; }
.g-why li::before { content: ''; position: absolute; left: 0; top: 13px; width: 10px; height: 1px; background: var(--champagne); }
.g-carte { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 44px; margin-top: 18px; }
.g-cat h3 { font-family: var(--display); font-size: 20px; color: var(--cream); margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--line-soft); }
.g-items { list-style: none; }
.g-items li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; padding: 7px 0; }
.g-items .g-name { font-family: var(--serif); font-size: 16px; color: var(--cream); }
.g-items i { flex: 1; min-width: 16px; border-bottom: 1px dotted rgba(233, 216, 166, 0.3); transform: translateY(-4px); }
.g-items .g-price { font-family: var(--sans); font-size: 12px; letter-spacing: 0.08em; color: var(--champagne); white-space: nowrap; }
.g-items small { flex-basis: 100%; font-size: 12.5px; color: var(--cream-dim); line-height: 1.45; margin-top: -2px; }
.g-week { list-style: none; display: grid; gap: 0; border-top: 1px solid var(--line-soft); }
.g-week li { display: grid; grid-template-columns: 110px 1fr auto; gap: 14px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.g-week b { font-family: var(--sans); font-size: 10.5px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--champagne); font-weight: 400; }
.g-week span { font-family: var(--serif); font-size: 16px; color: var(--cream); }
.g-week small { font-family: var(--sans); font-size: 11px; letter-spacing: 0.1em; color: var(--cream-dim); }
.g-link { color: var(--champagne); border-bottom: 1px solid var(--line); }
.g-link:hover { color: var(--champagne-lit); }
.g-faq dt { font-family: var(--display); font-size: 19px; color: var(--cream); margin-top: 18px; }
.g-faq dd { font-family: var(--serif); font-weight: 300; font-size: 16.5px; line-height: 1.6; color: var(--cream-dim); margin-top: 6px; max-width: 66ch; }
.g-links ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.g-links li a { display: inline-block; padding: 8px 16px; border: 1px solid var(--line); border-radius: 999px; font-family: var(--sans); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cream-dim); transition: 0.3s; }
.g-links li a:hover { border-color: var(--champagne); color: var(--champagne); }
.g-alt { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; }
.g-alt a { color: var(--champagne-dim); border-bottom: 1px solid var(--line); }
.g-index { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line-soft); margin-top: 30px; }
.g-group { background: var(--velvet); padding: 22px 24px; }
.g-group h2 { font-family: var(--display); font-size: 20px; color: var(--champagne); margin-bottom: 10px; }
.g-group ul { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.g-group li a { font-family: var(--sans); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cream-dim); border-bottom: 1px solid transparent; }
.g-group li a:hover { color: var(--champagne); border-bottom-color: var(--line); }
@media (max-width: 720px) { .g-carte, .g-index { grid-template-columns: 1fr; } .g-week li { grid-template-columns: 90px 1fr; } .g-week small { grid-column: 2; } }

/* The discreet line of doors under the landing buttons: the words a crawler
   needs, in the quiet voice the screen keeps. */
.landing-seo { width: min(560px, 88vw); margin-top: 34px; text-align: center; opacity: 0; animation: dawn 1.2s var(--ease) 0.85s forwards; }
.landing-seo p { font-family: var(--serif); font-weight: 300; font-size: 15px; line-height: 1.6; color: var(--cream-dim); }
.landing-seo ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; margin-top: 12px; }
.landing-seo a { font-family: var(--sans); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--champagne-dim); border-bottom: 1px solid transparent; }
.landing-seo a:hover { color: var(--champagne); border-bottom-color: var(--line); }
/* The carte rendered into the page before any script runs; the script then
   takes the same box over. */
#menuSSR .g-carte { margin-top: 0; }

/* ---------- Partners ---------- */
/* The houses whose bottles are on the carte, in their own colours on the
   ivory the carte is printed on. One hairline grid, no plates, the marks
   themselves the only ornament. */
.partners { background: var(--ivory); }
.partners-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px;
  background: var(--rule-on-ivory-soft); border: 1px solid var(--rule-on-ivory-soft);
}
.partner {
  background: var(--ivory); display: grid; place-items: center;
  padding: clamp(22px, 3vw, 36px) clamp(16px, 2.4vw, 28px); min-height: 128px;
  transition: background 0.4s var(--ease);
}
.partner:hover { background: #fff; }
.partner img { max-width: 100%; max-height: 64px; width: auto; height: auto; object-fit: contain; display: block; }
.partners .section-sub { text-align: center; margin-left: auto; margin-right: auto; }
.partners-note { text-align: center; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--brass); margin-top: 22px; }
@media (max-width: 900px) { .partners-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) { .partners-grid { grid-template-columns: repeat(2, 1fr); } .partner { min-height: 100px; } .partner img { max-height: 48px; } }


/* ---------- The carte's four cards ----------
   A photograph, a name, and a way in. The photograph is the only thing that
   moves: it drifts in as the card is approached, which is enough to say the
   card is live without anything sliding about the page. The card itself is
   a button, so a keyboard reaches it and says what it is. */
.carte-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 18px; margin: 0 0 46px;
}
.carte-card {
  position: relative; display: block; width: 100%; min-height: 260px;
  padding: 0; border: 0; border-radius: 16px; overflow: hidden; cursor: pointer;
  background: #1a070c; text-align: left; color: #fff; isolation: isolate;
  transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s ease;
}
.cc-photo {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
  transform: scale(1.04); transition: transform 1.1s cubic-bezier(.2,.8,.2,1), filter .5s ease;
  filter: saturate(.92) brightness(.78);
}
/* The words sit on the photograph, so the photograph has to give way under
   them whatever it happens to be. */
.carte-card::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(12,3,6,.92) 0%, rgba(12,3,6,.55) 38%, rgba(12,3,6,.12) 68%, rgba(12,3,6,.3) 100%);
}
.cc-body {
  position: relative; z-index: 2; margin-top: auto;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 20px 16px 22px; text-align: center;
}
.carte-card { display: flex; flex-direction: column; justify-content: flex-end; }
.cc-name {
  display: block; font-family: var(--sans); font-weight: 700; font-size: 19px;
  line-height: 1.2; letter-spacing: .01em; overflow-wrap: anywhere;
}
/* The way in, as a button. It was a grey word with an arrow after it, which
   reads as a caption on a photograph. */
.cc-link {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 34px; padding: 7px 17px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .6);
  background: rgba(255, 255, 255, .14); backdrop-filter: blur(4px);
  font-family: var(--sans); font-weight: 700; font-size: 12.5px;
  letter-spacing: .06em; color: #fff;
  transition: background .3s ease, border-color .3s ease, color .3s ease;
}
.carte-card:hover .cc-link, .carte-card:focus-visible .cc-link {
  background: var(--champagne); border-color: var(--champagne); color: var(--velvet-deep);
}
.cc-link::after {
  content: ''; width: 15px; height: 9px; flex: none;
  background: currentColor; transition: transform .45s cubic-bezier(.2,.8,.2,1);
  -webkit-mask: var(--cc-arrow) no-repeat center / contain;
  mask: var(--cc-arrow) no-repeat center / contain;
}
/* The circle in the corner, as on the owner's sketch. */
.cc-go {
  position: absolute; z-index: 2; top: 16px; right: 16px; width: 38px; height: 38px;
  border-radius: 50%; background: rgba(255,255,255,.16); backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.3);
  transition: background .45s ease, transform .45s cubic-bezier(.2,.8,.2,1);
}
.cc-go::after {
  content: ''; position: absolute; inset: 0; margin: auto; width: 15px; height: 9px;
  background: #fff;
  -webkit-mask: var(--cc-arrow) no-repeat center / contain;
  mask: var(--cc-arrow) no-repeat center / contain;
}
:root { --cc-arrow: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M0 5h13M9 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

.carte-card:hover, .carte-card:focus-visible { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(30, 6, 12, .28); }
.carte-card:hover .cc-photo, .carte-card:focus-visible .cc-photo { transform: scale(1.12); filter: saturate(1) brightness(.84); }
.carte-card:hover .cc-go, .carte-card:focus-visible .cc-go { background: rgba(255,255,255,.3); transform: translateX(3px); }
.carte-card:hover .cc-link::after, .carte-card:focus-visible .cc-link::after { transform: translateX(5px); }
.carte-card:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }

/* The card that is open. A hairline under it rather than a filled state, so
   the row still reads as four photographs and not as a set of buttons. */
.carte-card.active { box-shadow: inset 0 0 0 2px var(--brass), 0 14px 32px rgba(30, 6, 12, .22); }
.carte-card.active .cc-photo { filter: saturate(1) brightness(.88); }

.carte-section[hidden] { display: none; }
.carte-empty {
  grid-column: 1 / -1; font-family: var(--serif); font-style: italic;
  color: var(--para); opacity: .8; padding: 20px 0;
}

@media (prefers-reduced-motion: reduce) {
  .carte-card, .cc-photo, .cc-go, .cc-link::after { transition: none; }
  .carte-card:hover .cc-photo, .carte-card:focus-visible .cc-photo { transform: scale(1.04); }
}
@media (max-width: 640px) {
  .carte-cards { grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 34px; }
  .carte-card { min-height: 186px; }
  .carte-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .cc-body { padding: 14px 10px 15px; gap: 9px; }
  .cc-name { font-size: 15.5px; }
  .cc-link { font-size: 11px; padding: 6px 13px; min-height: 30px; letter-spacing: .04em; }
  .cc-go { width: 30px; height: 30px; top: 11px; right: 11px; }
}


/* ---------- The film on a card ----------
   It sits over the still and under the wash, so a card that is still loading
   or has been told to keep quiet shows the still and nothing jumps when the
   film arrives. */
.cc-film {
  position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%;
  object-fit: cover; filter: saturate(.92) brightness(.78);
  transform: scale(1.04); transition: transform 1.1s cubic-bezier(.2,.8,.2,1), filter .5s ease;
}
.carte-card:hover .cc-film, .carte-card:focus-visible .cc-film { transform: scale(1.12); filter: saturate(1) brightness(.84); }
.carte-card.active .cc-film { filter: saturate(1) brightness(.88); }
/* The cards are links now, not buttons: a crawler follows them and a guest
   can open one in a new tab. */
a.carte-card { text-decoration: none; }

/* ---------- Where the guest is ---------- */
/* Where the guest is, as buttons.

   Grey text between grey chevrons is the convention and also the reason
   nobody sees it: on a phone this is the only way back up and it read as a
   caption. Each step is a bordered pill in the same velvet and champagne a
   dish card takes under the pointer, so the carte answers the mouse the same
   way everywhere. The step being stood on is filled; the ones behind it are
   outlined and fill when pointed at. */
.carte-crumbs {
  display: flex; flex-wrap: nowrap; align-items: center; gap: 8px;
  justify-content: center;
  /* A centred flex line that overflows is clipped at the START, and the
     first step becomes unreachable. `safe` falls back to flex-start exactly
     when that would happen; a browser that does not know it keeps the line
     above. */
  justify-content: safe center;
  overflow-x: auto; overscroll-behavior-x: contain;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  font-family: var(--sans); font-size: 12.5px; margin: 0 0 24px;
  /* Room for the pills' lift on hover, which would otherwise be cropped by
     the scroll box. */
  padding: 3px 0;
}
.carte-crumbs::-webkit-scrollbar { display: none; }
/* Nothing in the trail is allowed to shrink: a squeezed step reads as a
   different word. */
.carte-crumbs > * { flex: none; }
.carte-crumbs a,
.carte-crumbs [aria-current] {
  display: inline-flex; align-items: center; min-height: 34px;
  padding: 6px 15px; border-radius: 999px;
  font-weight: 700; letter-spacing: .04em; text-decoration: none;
  transition: background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}
.carte-crumbs a {
  color: var(--ink); background: rgba(255, 255, 255, .72);
  /* 3.95:1 against the page. A control's boundary needs 3:1 or the pill
     reads as a tinted word rather than as something to press; at .3 it
     measured 1.96. */
  border: 1px solid rgba(42, 10, 16, .55);
}
.carte-crumbs a:hover, .carte-crumbs a:focus-visible {
  background: var(--velvet); border-color: var(--velvet); color: var(--champagne-lit);
  transform: translateY(-1px);
}
.carte-crumbs a:focus-visible { outline: 2px solid var(--brass-strong); outline-offset: 2px; }
/* Filled, because it is the answer to "where am I". */
.carte-crumbs [aria-current] {
  background: var(--velvet); color: var(--champagne-lit);
  border: 1px solid var(--champagne);
}
.crumb-sep {
  color: var(--brass-strong); font-size: 15px; line-height: 1; opacity: .7;
}
@media (hover: none) {
  .carte-crumbs a:hover {
    background: rgba(255, 255, 255, .72); border-color: rgba(42, 10, 16, .55);
    color: var(--ink); transform: none;
  }
}
@media (max-width: 720px) {
  .carte-crumbs { gap: 5px; margin-bottom: 18px; }
  .carte-crumbs a, .carte-crumbs [aria-current] { padding: 5px 11px; min-height: 32px; font-size: 11.5px; }
  .crumb-sep { font-size: 13px; }
}
@media (max-width: 420px) {
  /* Tighter again, so the trails that fit keep fitting and only the long
     ones have to be scrolled. */
  .carte-crumbs { gap: 4px; }
  .carte-crumbs a, .carte-crumbs [aria-current] { padding: 5px 9px; font-size: 11px; letter-spacing: .02em; }
}

/* ---------- The categories of a section ----------
   Cards, not pills: a category is a way in and should look like one. Each
   carries a face, which is its own picture if the owner set one, the first
   dish in it that has one otherwise, and the still from its section's film
   as a last resort, so nothing is ever a blank rectangle. */
.carte-mini {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
  gap: 14px; margin: 0 0 30px;
}
.cat-card {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 132px; border-radius: 13px; overflow: hidden; isolation: isolate;
  text-decoration: none; color: var(--cream); background: var(--ink);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease;
}
.cat-photo {
  position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center;
  filter: saturate(.9) brightness(.72);
  transform: scale(1.03); transition: transform .8s cubic-bezier(.2,.8,.2,1), filter .35s ease;
}
/* The name sits on the photograph, so the photograph gives way under it
   whatever it happens to be. */
.cat-card::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(36,7,13,.94) 0%, rgba(36,7,13,.6) 42%, rgba(36,7,13,.12) 100%);
}
.cat-body {
  position: relative; z-index: 2; display: block; padding: 12px 14px;
}
.cat-name {
  font-family: var(--sans); font-weight: 700; font-size: 14.5px; line-height: 1.25;
  color: #fff; overflow-wrap: anywhere;
}
/* In the corner, clear of a name however many lines it takes: on the first
   baseline it was pushed aside by "Champagnes & Prosecco". */
.cat-count {
  position: absolute; z-index: 2; top: 9px; right: 10px;
  min-width: 22px; padding: 2px 7px; border-radius: 999px; text-align: center;
  background: rgba(36, 7, 13, .55); backdrop-filter: blur(4px);
  font-family: var(--sans); font-size: 10.5px; letter-spacing: .08em;
  color: var(--champagne);
}
.cat-card:hover, .cat-card:focus-visible { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(42,10,16,.24); }
.cat-card:hover .cat-photo, .cat-card:focus-visible .cat-photo { transform: scale(1.1); filter: saturate(1) brightness(.8); }
.cat-card:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }
.cat-card.active { box-shadow: inset 0 0 0 2px var(--champagne), 0 12px 26px rgba(42,10,16,.2); }
.cat-card.active .cat-photo { filter: saturate(1) brightness(.84); }

/* The four cards are the whole of /menu, and are put away below it: the
   crumbs say where the guest is and the categories need the room. They stay
   in the markup so a crawler always has the four links. */
.carte-body[data-level="0"] .carte-crumbs { display: none; }
.carte-body:not([data-level="0"]) .carte-cards { display: none; }
/* A category is a page of its own. Leaving the grid of categories above it
   made opening one read as the same page with more added to it; the trail is
   what carries the guest back. */
.carte-body[data-level="2"] .carte-mini,
.carte-body[data-level="3"] .carte-mini { display: none; }

/* ---------- The dishes ----------
   Two to a line on a laptop and one on a phone, as asked: a dish card carries
   a picture, a name, what it is and a price for each way of having it, and
   two of those side by side is as much as a screen can hold and still be
   read. */
.carte-cat-head { margin: 8px 0 18px; }
.carte-cat-head h2 {
  font-family: var(--display); font-size: clamp(22px, 2.2vw, 30px); font-weight: 500;
  color: var(--ink); margin: 0; line-height: 1.15;
}
.carte-cat-head p { font-family: var(--serif); font-style: italic; color: var(--para); font-size: 15px; margin: 6px 0 0; }
/* A section read as a whole: each category's cards under a label and a
   hairline, the way the carte's printed pages divide themselves. */
/* A <section>, so it has to shed the page-band padding every section gets */
.carte-group { padding: 0; }
.carte-group + .carte-group { margin-top: 38px; }
.carte-group-title {
  font-family: var(--sans); font-size: 12px; font-weight: 400; letter-spacing: .3em; text-indent: .3em;
  text-transform: uppercase; color: var(--brass); margin: 0 0 16px; padding-bottom: 10px;
  border-bottom: 1px solid rgba(138, 106, 42, .35);
}
/* The carte is a list of things to look at, not a column of prose, so on a
   wide screen it takes four fifths of it rather than the site's reading
   width: the dish cards were drawn to be seen two at a time and they were
   coming out narrow with the page half empty beside them. */
@media (min-width: 1000px) {
  .menu-page .container { width: 80vw; max-width: 1700px; }
}

/* One height for every card in a category, set by the tallest. Sized to
   their own contents they came out ragged, and a menu is a list of things of
   the same kind: they should look it. */
.item-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; grid-auto-rows: 1fr; }
.item-card {
  display: grid; grid-template-columns: 116px 1fr; gap: 0;
  border: 1px solid var(--rule-on-ivory); border-radius: 14px; overflow: hidden;
  background: rgba(255,255,255,.55); text-decoration: none; color: inherit;
  transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease, border-color .3s ease;
}
.item-card:hover, .item-card:focus-visible {
  transform: translateY(-2px); border-color: rgba(42,10,16,.2);
  box-shadow: 0 12px 26px rgba(42,10,16,.1);
}
.item-card:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.item-card.active { border-color: var(--brass); box-shadow: inset 0 0 0 1px var(--brass); }
.ic-pic { display: block; background: rgba(42,10,16,.05); }
.ic-pic img { display: block; width: 100%; height: 100%; min-height: 122px; object-fit: cover; }
.ic-pic-none { min-height: 122px; }
/* The words sit at the top of a card that may be taller than they are. */
.ic-body { display: flex; flex-direction: column; align-items: flex-start; padding: 14px 16px; min-width: 0; }
.ic-name {
  display: block; font-family: var(--serif); font-size: 17px; color: var(--ink);
  line-height: 1.25; overflow-wrap: anywhere;
}
.ic-desc {
  display: block; font-family: var(--sans); font-size: 12.5px; line-height: 1.5;
  color: var(--para); opacity: .85; margin-top: 5px;
  /* Three lines on a card; the whole of it is on the dish's own page. */
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.ic-formula {
  display: block; font-family: var(--sans); font-size: 12px; color: var(--brass);
  margin-top: 6px; letter-spacing: .02em;
}
.ic-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 10px; }
.ic-tag {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 4px 10px; border-radius: 999px; background: rgba(42,10,16,.06);
  font-family: var(--sans); font-weight: 700; font-size: 12px; letter-spacing: .06em;
  color: var(--brass-strong); white-space: nowrap;
}
.ic-way { font-weight: 400; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--para); opacity: .8; }
.ic-tag.mi-ask { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 13px; letter-spacing: 0; text-transform: none; }
.ic-tag .mi-was { opacity: .55; margin-right: 4px; }

/* ---------- One dish, on its own page ---------- */
.carte-one {
  display: grid; grid-template-columns: minmax(0, 420px) 1fr; gap: clamp(20px, 3vw, 40px);
  align-items: start; margin: 4px 0 40px; padding-bottom: 34px;
  border-bottom: 1px solid var(--rule-on-ivory);
}
.one-pic img { display: block; width: 100%; height: auto; border-radius: 14px; cursor: zoom-in; }
.one-where { font-family: var(--sans); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 8px; }
.one-where a { color: var(--para); text-decoration: none; }
.one-where a:hover { color: var(--ink); }
.one-name { font-family: var(--display); font-size: clamp(26px, 3vw, 38px); font-weight: 500; color: var(--ink); margin: 0; line-height: 1.1; }
.one-desc { font-family: var(--sans); font-size: 15px; line-height: 1.6; color: var(--para); margin: 14px 0 0; max-width: 60ch; }
.one-formula { display: block; font-family: var(--sans); font-size: 14px; color: var(--brass); margin-top: 12px; }
.one-tags { margin-top: 18px; }
.one-tags .ic-tag { font-size: 14px; padding: 7px 14px; }

@media (max-width: 860px) {
  .carte-one { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  /* One dish card per line, so a phone reads the carte a dish at a time. */
  .item-grid { grid-template-columns: 1fr; gap: 12px; }
  .item-card { grid-template-columns: 96px 1fr; }
  .ic-body { padding: 12px 13px; }
  .ic-name { font-size: 15.5px; }
}


/* ---------- A dish card under the mouse ----------
   The house's own night pair: the velvet of the logo with champagne
   lettering on it. The name, the description and both parts of every price
   tag are lifted to colours that clear 4.5:1 on that velvet, so a card that
   lights up is more legible than it was at rest, not less. */
.item-card:hover, .item-card:focus-visible {
  background: var(--velvet);
  border-color: rgba(233, 216, 166, .38);
  box-shadow: 0 16px 34px rgba(42, 10, 16, .26);
}
.item-card:hover .ic-name, .item-card:focus-visible .ic-name { color: var(--champagne-lit); }
.item-card:hover .ic-desc, .item-card:focus-visible .ic-desc { color: var(--cream); opacity: .84; }
.item-card:hover .ic-formula, .item-card:focus-visible .ic-formula { color: var(--champagne); }
.item-card:hover .ic-tag, .item-card:focus-visible .ic-tag {
  background: rgba(233, 216, 166, .16); color: var(--champagne-lit);
}
.item-card:hover .ic-way, .item-card:focus-visible .ic-way { color: var(--cream); opacity: .8; }
.item-card:hover .ic-tag.mi-ask, .item-card:focus-visible .ic-tag.mi-ask { color: var(--cream); }
.item-card:hover .ic-pic, .item-card:focus-visible .ic-pic { background: rgba(233, 216, 166, .08); }
.item-card:hover .ic-pic img, .item-card:focus-visible .ic-pic img { filter: saturate(1.04); }
/* The card that is open reads the same way, so the page does not change
   colour under the pointer on the dish already being looked at. */
.item-card.active {
  background: var(--velvet); border-color: var(--champagne); box-shadow: none;
}
.item-card.active .ic-name { color: var(--champagne-lit); }
.item-card.active .ic-desc { color: var(--cream); opacity: .84; }
.item-card.active .ic-tag { background: rgba(233, 216, 166, .16); color: var(--champagne-lit); }
.item-card.active .ic-way { color: var(--cream); opacity: .8; }

@media (max-width: 720px) {
  .carte-mini { grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 22px; }
  .cat-card { min-height: 104px; border-radius: 11px; }
  .cat-body { padding: 10px 11px; }
  .cat-name { font-size: 13px; }
  .cat-count { font-size: 10px; top: 7px; right: 8px; }
}
/* A finger has no hover: the colour would stick to whatever was tapped last
   and the page would be left with one card lit for no reason. */
@media (hover: none) {
  .item-card:hover { background: rgba(255,255,255,.55); border-color: var(--rule-on-ivory); box-shadow: none; }
  .item-card:hover .ic-name { color: var(--ink); }
  .item-card:hover .ic-desc { color: var(--para); }
  .item-card:hover .ic-formula { color: var(--brass); }
  .item-card:hover .ic-tag { background: rgba(42,10,16,.06); color: var(--brass); }
  .item-card:hover .ic-way { color: var(--para); }
  .cat-card:hover { transform: none; box-shadow: none; }
}

/* The player's guide on /casino: a numbered index with hairlines between
   the entries, the way a contents page reads, rather than a grid of cards. */
.casino-guide { margin: clamp(40px, 6vw, 64px) 0 0; padding-top: clamp(28px, 4vw, 40px); border-top: 1px solid var(--line-soft); }
.casino-guide h2 { font-family: var(--display); font-size: clamp(28px, 4vw, 40px); color: var(--champagne); margin: 6px 0 12px; }
.casino-guide-lead { font-family: var(--serif); font-weight: 300; font-size: 17px; line-height: 1.65; color: var(--cream-dim); max-width: 64ch; margin-bottom: 18px; }
.casino-guide-list { list-style: none; border-top: 1px solid var(--line-soft); }
.casino-guide-list li { border-bottom: 1px solid var(--line-soft); }
.casino-guide-list a { display: flex; gap: 22px; align-items: baseline; padding: 20px 4px; transition: 0.3s; }
.cg-n { font-family: var(--sans); font-size: 11px; letter-spacing: 0.2em; color: var(--champagne-dim); flex: none; width: 26px; }
.cg-copy { display: grid; gap: 6px; }
.cg-copy b { font-family: var(--display); font-weight: 400; font-size: clamp(19px, 2.4vw, 24px); color: var(--cream); transition: 0.3s; }
.cg-copy small { font-family: var(--serif); font-weight: 300; font-size: 15.5px; line-height: 1.5; color: var(--cream-dim); }
.casino-guide-list a:hover .cg-copy b, .casino-guide-list a:focus-visible .cg-copy b { color: var(--champagne-lit); }
.casino-guide-list a:hover { padding-left: 10px; }
.casino-guide h3 { font-family: var(--sans); font-weight: 400; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--champagne-dim); margin: 30px 0 12px; }
.casino-guide-local { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.casino-guide-local a { display: inline-block; padding: 8px 16px; border: 1px solid var(--line); border-radius: 999px; font-family: var(--sans); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cream-dim); transition: 0.3s; }
.casino-guide-local a:hover { border-color: var(--champagne); color: var(--champagne); }

/* The articles themselves */
.g-figure { margin: 26px 0 0; }
.g-figure img { width: 100%; height: auto; max-height: 460px; object-fit: cover; border-radius: 12px; display: block; }
.g-steps { list-style: none; counter-reset: step; display: grid; gap: 14px; max-width: 70ch; }
.g-steps li { counter-increment: step; position: relative; padding-left: 42px; font-family: var(--serif); font-weight: 300; font-size: 17px; line-height: 1.6; color: var(--cream-dim); }
.g-steps li::before { content: counter(step, decimal-leading-zero); position: absolute; left: 0; top: 3px; font-family: var(--sans); font-size: 11px; letter-spacing: 0.18em; color: var(--champagne); }
.g-block ul.g-why + p { margin-top: 14px; }
.g-terms dt { color: var(--champagne-lit); }
.casino-guide .portal-kicker { text-align: left; }
.casino-guide + .sheet-note { margin-top: clamp(40px, 6vw, 56px); }

/* ---- The casino page ---------------------------------------------------
   A full-bleed cover with the bar laid over it, four cards that rise out of
   its lower edge and turn gold under the pointer, then a strip of the room's
   photographs that runs by on its own, then the player's guide. */
.page-casino .portal-bar { position: absolute; inset: 0 0 auto 0; }
.cz { flex: 1; }
/* The site's generic section spacing and divider lines are not for this page */
.cz-hero, .cz-slider { padding: 0; }
.cz section::before { display: none; }
.cz-hero { position: relative; min-height: min(92svh, 920px); display: flex; align-items: flex-end; overflow: hidden; isolation: isolate; }
.cz-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; animation: cz-settle 14s var(--ease) both; }
.cz-hero::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(36, 7, 13, 0.86) 0%, rgba(36, 7, 13, 0.55) 38%, rgba(36, 7, 13, 0) 68%),
    linear-gradient(180deg, rgba(36, 7, 13, 0.82) 0%, rgba(36, 7, 13, 0.1) 24%, rgba(36, 7, 13, 0.25) 55%, rgba(36, 7, 13, 0.95) 90%, var(--velvet-deep) 100%);
}
@keyframes cz-settle { from { transform: scale(1.07); } to { transform: scale(1); } }
.cz-hero-copy { width: min(1180px, 92vw); margin: 0 auto; padding: 0 0 clamp(120px, 14vh, 170px); }
.cz-hero-copy .portal-kicker, .cz-hero-copy .portal-title { text-align: left; }
.cz-hero-copy .portal-title { font-size: clamp(48px, 8vw, 104px); line-height: 1; margin-top: 10px; }
.cz-lead { font-family: var(--serif); font-weight: 300; font-size: clamp(17px, 1.6vw, 20px); line-height: 1.65; color: var(--cream); max-width: 58ch; margin-top: 20px; text-shadow: 0 1px 18px rgba(36, 7, 13, 0.9); }
.cz-hero-copy .sheet-actions { justify-content: flex-start; margin-top: 28px; }

.cz-cards {
  position: relative; z-index: 2;
  width: min(1180px, 92vw); margin: clamp(-96px, -8vw, -56px) auto 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
.cz-card {
  background: rgba(46, 9, 17, 0.9); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--line); border-radius: 18px; padding: 30px 26px 34px;
  transition: background-color 0.45s var(--ease), border-color 0.45s var(--ease), transform 0.45s var(--ease), box-shadow 0.45s var(--ease);
}
.cz-num { display: block; font-family: var(--sans); font-size: 11px; letter-spacing: 0.24em; color: var(--champagne-dim); margin-bottom: 22px; transition: color 0.45s var(--ease); }
.cz-card h2 { font-family: var(--display); font-weight: 400; font-size: 24px; line-height: 1.2; color: var(--champagne); margin-bottom: 12px; transition: color 0.45s var(--ease); }
.cz-card p { font-family: var(--serif); font-weight: 300; font-size: 16px; line-height: 1.6; color: var(--cream-dim); transition: color 0.45s var(--ease); }
.cz-card:hover {
  background: var(--champagne); border-color: var(--champagne); transform: translateY(-6px);
  box-shadow: 0 22px 60px rgba(233, 216, 166, 0.18);
}
.cz-card:hover h2, .cz-card:hover p, .cz-card:hover .cz-num { color: var(--velvet-deep); }

.cz-slider {
  margin-top: clamp(56px, 8vw, 100px); overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.cz-track { display: flex; width: max-content; animation: cz-scroll 60s linear infinite; }
.cz-slider:hover .cz-track { animation-play-state: paused; }
.cz-track figure { flex: none; height: clamp(220px, 30vw, 380px); margin: 0 16px 0 0; }
.cz-track img { height: 100%; width: auto; display: block; border-radius: 14px; }
@keyframes cz-scroll { to { transform: translateX(-50%); } }

.cz-body { width: min(1180px, 92vw); margin: 0 auto; padding-bottom: 64px; }
.cz-body .casino-guide { margin-top: clamp(56px, 8vw, 96px); }

@media (max-width: 1024px) { .cz-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) {
  .cz-hero { min-height: 88svh; }
  /* The copy runs the full width of a phone, so the whole picture is dimmed behind it */
  .cz-hero::after { background: linear-gradient(180deg, rgba(36, 7, 13, 0.8) 0%, rgba(36, 7, 13, 0.55) 30%, rgba(36, 7, 13, 0.7) 60%, rgba(36, 7, 13, 0.96) 90%, var(--velvet-deep) 100%); }
  .cz-hero-copy { padding-bottom: 96px; }
  .cz-cards { grid-template-columns: 1fr; margin-top: -48px; }
  .cz-card { padding: 24px 22px 26px; }
  .cz-num { margin-bottom: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .cz-hero-img { animation: none; }
  .cz-track { animation: none; }
  .cz-slider { overflow-x: auto; }
}

/* The shows hub: each entry is a heading link and the line Google shows for it */
.g-group > p { font-family: var(--serif); font-weight: 300; font-size: 15.5px; line-height: 1.55; color: var(--cream-dim); }
.g-group h2 a { color: inherit; transition: color 0.3s; }
.g-group h2 a:hover { color: var(--champagne-lit); }

/* Where a dish comes from, and the chef's own */
.ic-flag { display: inline-block; width: 20px; height: 14px; vertical-align: -1px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.12); }
.one-name .ic-flag { width: 30px; height: 21px; vertical-align: 3px; }
.ic-star { color: var(--brass, #b08d57); font-size: .9em; }
.one-sig { font-family: var(--sans); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--brass, #b08d57); margin: 6px 0 10px; }
.ic-serves { display: inline-block; vertical-align: 2px; margin-left: 2px; padding: 2px 9px; border: 1px solid currentColor; border-radius: 999px; font-family: var(--sans); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--brass, #b08d57); white-space: nowrap; }
.one-name .ic-serves { font-size: 13px; vertical-align: 8px; padding: 3px 12px; }

/* ---------- The corner buttons: book left, WhatsApp right, on every page ---------- */
/* A round icon at rest; the words slide out of it under the mouse. A phone
   has no hover, so there it stays the icon, and a tap simply follows it. */
.fcta {
  --edge: clamp(14px, 3vw, 26px);
  position: fixed; bottom: var(--edge); z-index: 65;
  display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
  height: 50px; min-width: 50px; padding: 0 14px; border-radius: 999px;
  font-family: var(--sans); font-size: 11px; font-weight: 400; line-height: 1;
  text-transform: uppercase; letter-spacing: 0.2em; text-decoration: none; white-space: nowrap;
  box-shadow: 0 10px 30px rgba(20, 4, 8, 0.35);
  transition: padding 0.5s var(--ease), background-color 0.45s var(--ease), color 0.45s var(--ease),
    border-color 0.45s var(--ease), box-shadow 0.45s var(--ease);
}
.fcta[hidden] { display: none; }
.fcta svg { width: 19px; height: 19px; flex: none; transition: transform 0.45s var(--ease); }
.fcta-label {
  display: inline-block; overflow: hidden; max-width: 0; opacity: 0;
  transition: max-width 0.55s var(--ease), opacity 0.3s ease, margin 0.55s var(--ease);
}
.fcta-book {
  left: var(--edge);
  background: var(--champagne); color: var(--velvet-deep); border: 1px solid var(--champagne);
  animation: fcta-in-left 0.9s var(--ease) 0.6s both;
}
/* Anchored on the right, so the icon keeps the corner and the words open leftwards */
.fcta-chat {
  right: var(--edge); flex-direction: row-reverse;
  background: rgba(36, 7, 13, 0.92); color: var(--champagne); border: 1px solid var(--champagne-dim);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  animation: fcta-in-right 0.9s var(--ease) 0.75s both;
}
.fcta-chat svg { color: var(--wa); }
/* The landing film's sound button already holds the right corner */
.fcta-beside-sound .fcta-chat { right: calc(var(--edge) + 58px); }

@media (hover: hover) {
  .fcta:hover, .fcta:focus-visible { padding: 0 22px 0 17px; }
  .fcta-chat:hover, .fcta-chat:focus-visible { padding: 0 17px 0 22px; }
  .fcta:hover .fcta-label, .fcta:focus-visible .fcta-label { max-width: 200px; opacity: 1; transition-delay: 0s, 0.12s, 0s; }
  .fcta-book:hover .fcta-label, .fcta-book:focus-visible .fcta-label { margin-left: 10px; }
  .fcta-chat:hover .fcta-label, .fcta-chat:focus-visible .fcta-label { margin-right: 10px; }
  .fcta-book:hover, .fcta-book:focus-visible { background: var(--champagne-lit); border-color: var(--champagne-lit); box-shadow: 0 14px 36px rgba(20, 4, 8, 0.45), 0 0 0 4px rgba(233, 216, 166, 0.16); }
  .fcta-book:hover svg, .fcta-book:focus-visible svg { transform: rotate(-8deg); }
  .fcta-chat:hover, .fcta-chat:focus-visible { background: var(--wa); border-color: var(--wa); color: var(--velvet-deep); box-shadow: 0 14px 36px rgba(20, 4, 8, 0.45), 0 0 0 4px rgba(37, 211, 102, 0.18); }
  .fcta-chat:hover svg, .fcta-chat:focus-visible svg { color: var(--velvet-deep); transform: scale(1.1); }
}
.fcta:focus-visible { outline: 2px solid var(--champagne); outline-offset: 3px; }
@keyframes fcta-in-left { from { opacity: 0; translate: -140% 0; } to { opacity: 1; translate: 0 0; } }
@keyframes fcta-in-right { from { opacity: 0; translate: 140% 0; } to { opacity: 1; translate: 0 0; } }
.bookings-off .fcta-book { display: none; }
@media (max-width: 640px) {
  .fcta { height: 48px; min-width: 48px; padding: 0 13px; }
  .fcta-beside-sound .fcta-chat { right: calc(var(--edge) + 56px); }
  /* Room at the foot of the page, so the last footer line is never under a button */
  body::after { content: ''; display: block; height: 72px; }
}
@media (prefers-reduced-motion: reduce) {
  .fcta, .fcta-label { animation: none; transition: background-color 0.2s, color 0.2s, border-color 0.2s; }
  .fcta:hover svg, .fcta:focus-visible svg { transform: none; }
}