/* 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 that clears 4.5:1 on ivory: prices, labels */
  --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; }
.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: grid; grid-template-columns: 1fr 1fr; gap: clamp(38px, 4vw, 64px) clamp(44px, 6vw, 96px); align-items: start; }
@media (min-width: 1500px) { .menu-cols { 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); }
.menu-item .mi-price { font-family: var(--sans); font-weight: 400; color: var(--brass); font-size: 12.5px; letter-spacing: 0.08em; white-space: nowrap; }
.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%; }
.menu-actions { text-align: center; margin-top: 50px; }
.menu-page { padding-top: clamp(46px, 5vw, 76px); }
.menu-page .promo-notice { margin-bottom: 24px; }

/* Sold by the glass and by the bottle: one row, two price columns */
.menu-cat.two-way .mi-price { width: 5.6em; text-align: right; }
.menu-cat.two-way .mi-price.alt { width: 6.2em; }
.menu-item.mi-head { padding: 0 0 5px; border-bottom: 1px solid var(--rule-on-ivory-soft); margin-bottom: 5px; }
.menu-item.mi-head .mi-price { font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--para); opacity: 0.8; }

/* ---------- 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-hero h1 { font-size: clamp(40px, 5.4vw, 72px); position: relative; z-index: 3; color: var(--champagne); padding-bottom: 22px; }
.page-hero h1::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; }

/* ---------- 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; }

.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: 96px 0 36px; min-height: 100vh; box-sizing: border-box; display: flex; align-items: center; }
.account-main > .container { width: 100%; }
.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; }

.member-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; margin: 28px 0 42px; }
.member-card { background: rgba(58, 12, 20, 0.82); border: 1px solid var(--line); padding: 28px; }
.member-card h3 { font-family: var(--display); font-size: 24px; margin-bottom: 8px; color: var(--champagne); }
.member-card .btn { margin-top: 16px; width: 100%; text-align: center; }
.member-card .muted { color: var(--cream-dim); font-size: 14px; }
.fidelity-card { background: var(--velvet-glow); }
.fidelity-card .kicker { display: block; margin-bottom: 8px; }
.fidelity-card b { font-family: var(--display); font-size: 56px; color: var(--champagne); line-height: 1; }
.fidelity-card p { color: var(--cream-dim); font-size: 13px; margin-top: 12px; line-height: 20px; }
.fidelity-card.off b { opacity: 0.5; }
.member-heading { font-family: var(--display); font-size: 26px; margin-bottom: 18px; color: var(--champagne); }
.res-list { display: grid; gap: 0; border-top: 1px solid var(--line); }
.res-card { display: flex; align-items: center; gap: 18px; padding: 18px 4px; border-bottom: 1px solid var(--line-soft); }
.res-when { display: grid; min-width: 92px; }
.res-when b { font-family: var(--display); font-size: 22px; font-weight: 500; color: var(--champagne); }
.res-when span { font-size: 12px; color: var(--cream-dim); }
.res-meta { display: grid; flex: 1; }
.res-meta b { font-size: 15px; font-weight: 400; color: var(--cream); font-family: var(--serif); }
.res-meta span { font-size: 12px; color: var(--cream-dim); }
.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); } .menu-cols { grid-template-columns: 1fr; } }
/* Six links plus the switch, the booking button and two account links do not
   fit a laptop bar. Below this the whole lot moves into the burger panel. */
@media (max-width: 1240px) {
  .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; }
  .menu-item { flex-wrap: wrap; }
  .menu-item .mi-name { white-space: normal; max-width: 75%; }
  .menu-item .mi-dots { min-width: 20px; }
  .menu-cat.two-way .menu-item { flex-wrap: nowrap; align-items: baseline; }
  .menu-cat.two-way .mi-name { min-width: 0; max-width: none; flex: 1 1 auto; }
  .menu-cat.two-way .mi-dots { flex: 0 1 18px; min-width: 0; }
  .menu-cat.two-way .mi-price { flex: none; width: 3.6em; }
  .menu-cat.two-way .mi-price.alt { width: 4.4em; }
  .menu-cat.two-way .mi-head .mi-price { font-size: 8.5px; letter-spacing: 0.06em; }
  .section-title { font-size: 34px; }
}
@media (max-width: 720px) {
  .account-main { padding: 110px 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; }
  .res-card { flex-wrap: wrap; gap: 10px; }
  .res-when { min-width: 70px; }
  .contact-band { padding: 72px 0; }
  .contact-actions .btn { width: 100%; }
}
@media (max-height: 900px) { .account-main { align-items: flex-start; padding-top: 88px; } }

/* 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 ---------- */
.carte-lang { display: flex; justify-content: center; gap: 0; margin: -26px 0 44px; }
.carte-lang button { background: transparent; border: 0; cursor: pointer; font-family: var(--sans); font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; padding: 8px 16px; color: var(--para); opacity: .75; border-bottom: 1px solid transparent; transition: color .3s var(--ease), opacity .3s var(--ease), border-color .3s var(--ease); }
.carte-lang button + button { border-left: 1px solid var(--rule-on-ivory-soft); }
.carte-lang button:hover { opacity: 1; color: var(--ink); }
.carte-lang button.active { opacity: 1; color: var(--brass); border-bottom-color: var(--brass); }
@media (max-width: 560px) { .carte-lang { margin: -18px 0 32px; } .carte-lang button { padding: 8px 11px; font-size: 10px; letter-spacing: .12em; } }

/* ---------- Booking taken on WhatsApp ---------- */
.reserve-panel .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; }
.reserve-panel .btn.wa-btn:hover, .reserve-panel .btn.wa-btn:focus-visible { background: #1fb85a; color: var(--velvet-deep); }
.reserve-panel .btn.wa-btn svg { width: 1.2em; height: 1.2em; fill: currentColor; flex: none; }
.reserve-panel .btn.wa-btn.incomplete { opacity: .5; }