/* Le Mare Nostrum design system.
   Everything here is taken off the house's own identity rather than invented:
   the wine-black the logo is printed on, the pearl-rose of the mark itself, the
   brass of the lamps over the banquettes. Type follows the wordmark, which is a
   Didone over letterspaced caps over a fine copperplate signature.

   One motif, and it is used once rather than everywhere: the swash. The long
   hairline that sweeps out from under the M in the logo, dips, and rises. It
   is the shape the nav underline takes on hover, and that is all. A flourish
   repeated under every heading stops being a signature and becomes wallpaper.
   Everything else earns its place by holding type or holding a photograph. */

:root {
  --ink: #150c0e;         /* nuit: the wall the logo is printed on */
  --ink-2: #0b0607;       /* velours: the deepest band */
  --panel: #1e1416;       /* banquette */
  --panel-2: #271a1c;
  --pearl: #f2e6e2;       /* nacre: the logo's own ink, and every action */
  --pearl-dim: #c9b6b2;
  --para: #b6a3a1;        /* the paragraph voice */
  --brass: #c78f3f;       /* the lamps. The second voice, never the first */
  --brass-soft: rgba(199, 143, 63, 0.13);
  --wine: #7d2230;        /* the velvet. Surfaces and the promo strip only */
  --on-pearl: #1a0e10;    /* what sits on top of a pearl fill */
  --line: rgba(242, 230, 226, 0.16);
  --line-soft: rgba(242, 230, 226, 0.08);
  --ok: #8fae8b;
  --err: #dfa39c;

  /* The paper. Two bands of the site are printed rather than lit: the carte and
     the hours. Warm champagne, never white, with the wine-black of the wall as
     the ink and a darker brass that still has contrast on a light ground. */
  --paper: #f1e8dc;
  --paper-2: #e8dccb;
  --ink-on-paper: #241416;
  --para-on-paper: #6a5551;
  --gold-on-paper: #8a6222;
  --rule-on-paper: rgba(36, 20, 22, 0.16);

  /* Gilt. Brass at the alpha where it warms a black ground without ever
     becoming a gold panel: one wash per band, anchored somewhere different in
     each so no two dark sections light the same way. */
  --gilt-tr: radial-gradient(75% 60% at 90% 0%, rgba(199, 143, 63, 0.20), transparent 72%);
  --gilt-tl: radial-gradient(75% 60% at 10% 0%, rgba(199, 143, 63, 0.18), transparent 72%);
  --gilt-bc: radial-gradient(85% 65% at 50% 100%, rgba(199, 143, 63, 0.18), transparent 74%);
  --gilt-sweep: linear-gradient(104deg, transparent 6%, rgba(199, 143, 63, 0.16) 46%, transparent 84%);
  /* Light spilling down from the rule that closes the band above. This is the
     part that actually reads as gold; the radials only warm the corners. */
  --gilt-spill: linear-gradient(180deg, rgba(199, 143, 63, 0.17), rgba(199, 143, 63, 0.05) 9%, transparent 20%);
  /* The rule that closes each band: a hairline that fades out at both ends
     rather than running wall to wall, so it reads as struck rather than drawn. */
  --gilt-rule: linear-gradient(90deg, transparent, rgba(199, 143, 63, 0.5) 18%, rgba(199, 143, 63, 0.5) 82%, transparent);

  --display: 'Bodoni Moda', 'Didot', Georgia, serif;
  --sans: 'Outfit', 'Segoe UI', system-ui, sans-serif;
  /* Allura means one thing on this site and one thing only: what plays
     tonight. The night on the programme strip, the night beside the hours.
     It is never used as decoration inside a heading. */
  --script: 'Allura', 'Bodoni Moda', cursive;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* The slatted wall behind the banquettes: very fine vertical battens, plus
     one warm pool of lamplight anchored high right. Both drawn, so they cost
     nothing and hold at any width. */
  --slats: repeating-linear-gradient(90deg,
    rgba(242, 230, 226, 0.014) 0 1px,
    rgba(0, 0, 0, 0.05) 1px 3px,
    rgba(242, 230, 226, 0.006) 3px 7px);
  --lamp: radial-gradient(closest-side at 82% -6%,
    rgba(199, 143, 63, 0.16), rgba(199, 143, 63, 0.05) 55%, transparent 100%);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--lamp), var(--slats), var(--ink);
  background-attachment: fixed, scroll, scroll;
  color: var(--para);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* Bands that paint their own solid ground lose the battens, so they carry them */
.menu-section:not(.paper), footer, .reserve-panel, .programme-section { background-image: var(--slats); }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

::selection { background: var(--pearl); color: var(--on-pearl); }

:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }

/* ---------- Typography ---------- */
/* The wordmark is a Didone, so the page is too. Set tight and large, because a
   Didone only shows its contrast at size; small Didone is just a thin serif. */
/* Bodoni is an optical-size family: left to itself it picks an opsz to match
   the pixel size, and at display sizes that means hairlines a screen cannot
   hold. Pinning a mid opsz and taking the weight up keeps the Didone contrast
   without the strokes disappearing. */
h1, h2, h3 {
  font-family: var(--display);
  font-weight: 500;
  font-optical-sizing: none;
  font-variation-settings: 'opsz' 28;
  color: var(--pearl);
  line-height: 1.06;
}

/* The eyebrow states a fact about the house, never a mood word, and it rides
   a hairline that runs out to the end of the measure. The heading sits under
   it, left. A page whose every band is a centred stack of kicker, title and
   flourish reads as a template however good the parts are; this is the one
   device that carries the whole page, and it does not repeat itself. */
.kicker {
  display: flex; align-items: center; gap: 20px;
  font-family: var(--sans); font-weight: 500;
  font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--pearl-dim); line-height: 1;
}
.kicker::after { content: ''; flex: 1; height: 1px; background: var(--line); }
/* Centred heads take the rule on both sides, so the device is the same one */
.section-head.center .kicker::before { content: ''; flex: 1; height: 1px; background: var(--line); }

.section-title {
  font-size: clamp(34px, 4.5vw, 62px);
  margin: 26px 0 0;
  letter-spacing: -0.016em;
  font-weight: 500;
  font-variation-settings: 'opsz' 30;
  max-width: 20ch;
}
.section-head.center .section-title { max-width: none; }
.section-sub { color: var(--para); max-width: 58ch; font-size: 16px; margin-top: 20px; }
.section-head.center .section-sub { max-width: 66ch; }

.serif { font-family: var(--display); }

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

/* The side rail: the address, set vertically down the left edge. Quiet, always
   there, and the kind of thing a printed carte does that a website rarely
   bothers with. Desktop only, and never over the mobile menu. */
.side-rail {
  position: fixed; left: 20px; top: 50%; z-index: 40;
  transform: translateY(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  font-family: var(--sans); font-weight: 500;
  font-size: 10.5px; letter-spacing: 0.4em; text-transform: uppercase;
  color: var(--pearl-dim); opacity: 0.5;
  pointer-events: none;
}
@media (max-width: 1400px) { .side-rail { display: none; } }

/* ---------- Buttons ---------- */
/* The corners are cut rather than square or rounded: a chamfer, which is what
   a room built in 1990 with brass and fluted wood already has on every edge of
   it. A rectangle reads as a default and a pill reads as everybody else's.

   clip-path removes the border along the diagonals, so the outline is not a
   border at all. The element's own background IS the rule, and ::after lays the
   face one pixel inside it, clipped to the same shape. That also gives the
   double-line the photographs on this site are framed with, at button scale.
   The z-index: 0 is load-bearing: it makes the button a stacking context so the
   negative-z face paints above the button's background and below its label,
   instead of vanishing behind the section. */
.btn {
  --c: 8px;
  --cut: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c),
                 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%,
                 var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c));
  display: inline-block;
  position: relative;
  z-index: 0;
  padding: 17px 42px;
  border: 0;
  border-radius: 0;
  background: rgba(242, 230, 226, 0.6);
  clip-path: var(--cut);
  color: var(--pearl);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  text-indent: 0.18em;
  font-size: 11.5px;
  font-weight: 500;
  text-align: center;
  transition: color 0.45s var(--ease), background 0.45s var(--ease);
}
.btn::after {
  content: '';
  position: absolute; inset: 1px; z-index: -1;
  background: rgba(11, 6, 7, 0.8);
  clip-path: var(--cut);
  transition: background 0.45s var(--ease);
}
.btn:hover { color: var(--on-pearl); background: var(--pearl); }
.btn:hover::after { background: var(--pearl); }

.btn.solid { background: var(--pearl); color: var(--on-pearl); font-weight: 600; }
.btn.solid::after { background: var(--pearl); }
.btn.solid:hover { background: var(--brass); color: var(--brass); }
.btn.solid:hover::after { background: rgba(11, 6, 7, 0.72); }

.btn.ghost { background: rgba(242, 230, 226, 0.3); color: var(--para); }
.btn.ghost:hover { background: var(--pearl); color: var(--on-pearl); }

.btn:disabled { opacity: 0.45; pointer-events: none; }

.btn.danger { background: var(--wine); color: #fff; }
.btn.danger::after { background: var(--wine); }
.btn.danger:hover { background: var(--err); color: var(--err); }
.btn.danger:hover::after { background: rgba(11, 6, 7, 0.72); }

/* The same cut, smaller, on the two chips in the bar and on the carte's tabs,
   so one shape runs through everything that can be pressed. */
.nav-cta, .nav-auth, .menu-tabs button {
  --c: 8px;
  --cut: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c),
                 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%,
                 var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c));
  clip-path: var(--cut);
  border-radius: 0;
}


/* ---------- The bands ---------- */
/* The page was ten sections of the same near-black in a row, which reads as one
   long tunnel however good each section is. Three things break it: a hairline
   of gilt struck between every band, a wash of brass anchored somewhere
   different in each dark one, and two bands that are printed on paper rather
   than lit. */
section, footer { position: relative; }
section + section::before,
.formule::before, .programme-section::before, footer::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: var(--gilt-rule); z-index: 2;
}
/* Photo-backed bands paint their own scrim over the top edge, so the rule goes
   above it rather than under. Hero has nothing above it to be divided from. */
.hero::before { display: none; }

#about { background-image: var(--gilt-spill), var(--gilt-tr); }
#spaces { background-image: var(--gilt-spill), var(--gilt-tl); }
.programme-section { background-image: var(--gilt-spill), var(--gilt-bc), var(--slats); }
footer { background-image: var(--gilt-spill), var(--gilt-tl), var(--slats); }
/* The gallery stays the deepest band on the page: the photographs are the
   light in it, and a wash behind them only takes contrast away. */
.gallery-section { background-image: linear-gradient(180deg, rgba(199, 143, 63, 0.1), transparent 12%); }

/* The set menu is the richest band on the page, so it gets the wine and the
   brass together rather than one wash. */
.formule {
  background:
    var(--gilt-spill),
    var(--gilt-sweep),
    linear-gradient(102deg, rgba(11, 6, 7, 0.95) 0%, rgba(66, 23, 32, 0.78) 52%, rgba(11, 6, 7, 0.96) 100%),
    var(--slats), var(--ink-2);
}

/* ---------- Paper ---------- */
/* The carte and the hours are printed things, so they are printed: warm
   champagne, wine-black ink, gilt rules. It is the one real contrast on the
   page and it is what stops the site reading as a dark template. */
section.paper {
  background-color: var(--paper);
  background-image:
    radial-gradient(90% 70% at 50% -10%, rgba(255, 255, 255, 0.55), transparent 70%),
    repeating-linear-gradient(90deg, rgba(36, 20, 22, 0.012) 0 1px, transparent 1px 4px);
  color: var(--para-on-paper);
}
/* A brass hairline is invisible on champagne; the paper bands are closed with
   their own ink instead. */
.paper::before {
  background: linear-gradient(90deg, transparent, rgba(36, 20, 22, 0.28) 18%, rgba(36, 20, 22, 0.28) 82%, transparent) !important;
}
.paper .kicker { color: var(--gold-on-paper); }
.paper .kicker::before, .paper .kicker::after { background: var(--rule-on-paper); }
.paper .section-title, .paper h1, .paper h2, .paper h3 { color: var(--ink-on-paper); }
.paper .section-sub, .paper p { color: var(--para-on-paper); }

.paper .menu-tabs button { border-color: var(--rule-on-paper); color: var(--para-on-paper); }
.paper .menu-tabs button.active { background: var(--ink-on-paper); border-color: var(--ink-on-paper); color: var(--paper); }
.paper .cat-head { border-bottom-color: var(--rule-on-paper); }
.paper .menu-cat h3 { color: var(--ink-on-paper); }
.paper .menu-cat-sub { color: var(--gold-on-paper); }
.paper .menu-item .mi-name { color: var(--ink-on-paper); }
.paper .menu-item .mi-price { color: var(--gold-on-paper); }
.paper .menu-item .mi-dots { border-bottom-color: rgba(36, 20, 22, 0.24); }
.paper .menu-item-desc { color: var(--para-on-paper); opacity: 0.9; }
.paper .menu-item.mi-head { border-bottom-color: var(--rule-on-paper); }
.paper .mi-was { color: var(--para-on-paper); }
.paper .mi-deal { color: #4b6b46; }

.paper .hours-list li { border-bottom-color: var(--rule-on-paper); }
.paper .hours-list .day { color: var(--ink-on-paper); }
.paper .hours-list .day-note { color: var(--gold-on-paper); }
.paper .hours-list .dots { border-bottom-color: rgba(36, 20, 22, 0.22); }
.paper .hours-list .time { color: var(--para-on-paper); }
.paper .hours-list .closed { color: #9c3a34; }
.paper .contact-lines { color: var(--para-on-paper); }
.paper .contact-lines strong { color: var(--gold-on-paper); }
.paper .contact-lines a:hover { color: var(--ink-on-paper); }
/* The map is a daylight map again on a daylight band */
.paper #map { border-color: var(--rule-on-paper); }
.paper #map .leaflet-tile-pane { filter: sepia(0.24) saturate(0.62) brightness(1.03) contrast(0.95); }
.paper #map .leaflet-control-attribution { background: rgba(241, 232, 220, 0.8); color: var(--para-on-paper); }
.paper #map .leaflet-control-attribution a { color: var(--gold-on-paper); }
.paper #map .leaflet-bar a { background: var(--paper); color: var(--ink-on-paper); border-bottom-color: var(--rule-on-paper); }

/* On paper the button inverts: the rule and the fill are the ink of the band */
.paper .btn { background: rgba(36, 20, 22, 0.5); color: var(--ink-on-paper); }
.paper .btn::after { background: var(--paper); }
.paper .btn:hover { background: var(--ink-on-paper); color: var(--paper); }
.paper .btn:hover::after { background: var(--ink-on-paper); }
.paper .btn.solid { background: var(--ink-on-paper); color: var(--paper); }
.paper .btn.solid::after { background: var(--ink-on-paper); }
.paper .btn.solid:hover { background: var(--gold-on-paper); color: var(--gold-on-paper); }
.paper .btn.solid:hover::after { background: var(--paper); }
.paper ::selection { background: var(--ink-on-paper); color: var(--paper); }

/* ---------- Nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  padding: 20px 0;
  transition: background 0.5s, padding 0.5s, box-shadow 0.5s;
}
.nav.scrolled {
  background: rgba(11, 6, 7, 0.92);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  padding: 10px 0;
  box-shadow: 0 1px 0 var(--line-soft);
}
/* backdrop-filter makes .nav the containing block for fixed children, which
   breaks the full-screen mobile panel; drop it while that panel is open */
.nav.menu-open, .nav.scrolled.menu-open { backdrop-filter: none; -webkit-backdrop-filter: none; background: transparent; box-shadow: none; }
.nav .container { width: min(1580px, 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; }
/* The mark is wide, not square, so the height is fixed and it never shrinks:
   a crowded bar would otherwise collapse the column and the logo disappears.
   Under about 70px the hairline "RESTAURANT & LOUNGE" line stops resolving.
   The shadow is what holds it over the hero photograph, since there is no bar
   behind it until the page scrolls. */
.nav-logo img {
  height: 74px; width: auto; flex: none;
  filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.75));
  transition: height 0.4s var(--ease);
}
.nav.scrolled .nav-logo img { height: 56px; filter: none; }
.nav-links { display: flex; gap: 26px; align-items: center; list-style: none; grid-column: 2; grid-row: 1; justify-content: center; }
.nav-right { display: flex; gap: 16px; 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: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  text-indent: 0.15em;
  color: var(--pearl);
  opacity: 0.92;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55);
  transition: opacity 0.35s, color 0.35s;
  position: relative;
  padding: 8px 0;
  display: inline-block;
}
.nav.scrolled .nav-links a, .nav.scrolled .nav-right a { text-shadow: none; }
/* The swash again, in miniature: the underline dips rather than running flat */
.nav-links a::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 2px; height: 5px;
  background: no-repeat center / 100% 100%
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 6'%3E%3Cpath d='M0 2c22 5 44 5 66-1s28-2 34 1' fill='none' stroke='%23c78f3f' stroke-width='1'/%3E%3C/svg%3E");
  transform: scaleX(0); transform-origin: right;
  transition: transform 0.5s var(--ease);
}
.nav-links a:hover { opacity: 1; color: var(--brass); }
.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(--line); padding: 10px 22px !important; border-radius: 1px; }
.nav-cta:hover { background: var(--pearl); border-color: var(--pearl); color: var(--on-pearl) !important; }
.nav-cta::after { display: none; }

/* Two-state switch, sharp like the buttons, with the knob sliding under the
   active language rather than two separate lit blocks. */
.lang-switch {
  position: relative; display: flex; padding: 3px;
  border: 1px solid var(--line-soft); border-radius: 1px;
}
.lang-switch::before {
  content: ''; position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px);
  background: var(--pearl);
  transition: transform 0.4s var(--ease);
}
.lang-switch.on-fr::before { transform: translateX(100%); }
.lang-switch button {
  position: relative; z-index: 1; background: transparent; border: 0; color: var(--para);
  font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: 0.14em; padding: 6px 14px;
  transition: color 0.35s;
}
.lang-switch button.active { color: var(--on-pearl); }

.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(--pearl); transition: 0.4s var(--ease); }
.burger span:nth-child(1) { top: 0; }
.burger span:nth-child(2) { top: 9px; }
.burger span:nth-child(3) { top: 18px; }
.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 ---------- */
.hero {
  height: 100svh; min-height: 660px;
  position: relative; display: grid; place-items: center;
  text-align: center; overflow: hidden; padding: 0;
}
.hero-bg { position: absolute; inset: 0; background: var(--ink-2); }
.hero-bg video, .hero-bg img { width: 100%; height: 100%; object-fit: cover; }
.hero-bg img.kb { animation: drift 30s var(--ease) infinite alternate; }
@keyframes drift { from { transform: scale(1.02) translateY(0); } to { transform: scale(1.11) translateY(-1.5%); } }
/* Three layers, each doing a different job: a band of shade across the middle
   so the title and the two small lines under it hold, a vignette to keep the
   eye centred, and a foot dark enough for the section below to arrive out of.
   Held deliberately light. The photograph behind is the warm end of the bar and
   it is the whole point of the hero; the buttons carry their own contrast now,
   and the title its own shadow, so the veil does not have to do their work. */
.hero-bg::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, transparent 20%, rgba(11, 6, 7, 0.44) 42%, rgba(11, 6, 7, 0.44) 64%, transparent 84%),
    radial-gradient(125% 95% at 50% 44%, transparent 0%, rgba(11, 6, 7, 0.36) 74%, rgba(11, 6, 7, 0.8) 100%),
    linear-gradient(180deg, rgba(11, 6, 7, 0.52) 0%, rgba(11, 6, 7, 0.1) 42%, rgba(11, 6, 7, 0.8) 100%);
}
.hero-content { position: relative; z-index: 2; padding: 0 24px; }
/* The house name, set as the wordmark is: a Didone that starts wide and pulls
   itself tight as it arrives. One orchestrated moment, then nothing. */
.hero-script {
  font-family: var(--display);
  font-size: clamp(40px, 6.6vw, 92px);
  color: var(--pearl);
  font-weight: 600;
  font-optical-sizing: none;
  font-variation-settings: 'opsz' 18;
  line-height: 1.06;
  letter-spacing: -0.015em;
  max-width: 17ch;
  margin: 0 auto;
  text-shadow: 0 6px 50px rgba(0, 0, 0, 0.55);
}
.hero-tag {
  margin-top: 26px;
  font-family: var(--sans);
  color: var(--pearl);
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.7);
  font-size: clamp(11.5px, 1.25vw, 14px);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.52em;
  text-indent: 0.52em;
}
.hero-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 46px; }

.hero-content > * { opacity: 0; transform: translateY(24px); animation: heroIn 1.3s var(--ease) forwards; }
.hero-content > .hero-script { transform: translateY(24px); animation: heroTitleIn 1.5s var(--ease) forwards; }
.hero-content > *:nth-child(2) { animation-delay: 0.22s; }
.hero-content > *:nth-child(3) { animation-delay: 0.44s; }
.hero-content > *:nth-child(4) { animation-delay: 0.62s; }
@keyframes heroIn { to { opacity: 1; transform: none; } }
@keyframes heroTitleIn {
  from { opacity: 0; transform: translateY(24px); letter-spacing: 0.16em; }
  to { opacity: 1; transform: none; letter-spacing: -0.015em; }
}
@keyframes navItemIn { to { opacity: 1; transform: none; } }

/* The hours, and the year the room opened. The two facts people look for. */
.hero-hours {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  margin-top: 38px;
  font-family: var(--sans); font-size: 12px; font-weight: 500;
  letter-spacing: 0.36em; text-indent: 0.36em;
  color: var(--brass);
}
.hero-hours { text-shadow: 0 2px 20px rgba(0, 0, 0, 0.8); }
.hero-hours i { display: block; width: 54px; height: 1px; background: currentColor; opacity: 0.55; }
@media (max-width: 700px) { .hero-hours { margin-top: 28px; letter-spacing: 0.26em; text-indent: 0.26em; } }


/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); }
.reveal.visible { opacity: 1; transform: none; }
.reveal-left { opacity: 0; transform: translateX(-70px); transition: opacity 1.3s var(--ease), transform 1.3s var(--ease); }
.reveal-left.visible { opacity: 1; transform: none; }
.reveal[data-delay='1'], .reveal-left[data-delay='1'] { transition-delay: 0.12s; }
.reveal[data-delay='2'], .reveal-left[data-delay='2'] { transition-delay: 0.24s; }
.reveal[data-delay='3'], .reveal-left[data-delay='3'] { transition-delay: 0.36s; }

/* ---------- The frame ---------- */
/* Every photograph on the site is framed the way the pictures on the wall of
   the room are: a hairline keyline set in from the edge. It steps inward on
   hover while the photograph itself steps up. */
.img-frame { position: relative; overflow: hidden; border-radius: 1px; }
.img-frame::after {
  content: ''; position: absolute; inset: 12px; pointer-events: none;
  border: 1px solid rgba(242, 230, 226, 0.28);
  transition: inset 0.7s var(--ease), border-color 0.7s var(--ease);
}
.img-frame img { transition: transform 1.4s var(--ease); }
.img-frame:hover img { transform: scale(1.05); }
.img-frame:hover::after { inset: 18px; border-color: var(--brass); }

/* ---------- About ---------- */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 92px); align-items: center; }
.about-images { position: relative; padding-bottom: 92px; }
.about-images .img-main { width: 80%; }
.about-images .img-accent {
  position: absolute; right: 0; bottom: 0; width: 50%;
  border: 10px solid var(--ink);
  box-shadow: 0 34px 70px rgba(0, 0, 0, 0.55);
}
.about-images .img-accent::after { inset: 8px; }
.about-text p { color: var(--para); margin: 26px 0; font-size: 16.5px; }

/* ---------- Menu ---------- */
.menu-section { background: var(--ink-2); }
.menu-tabs { display: flex; justify-content: center; gap: 0; margin-bottom: 46px; }
.menu-tabs button {
  background: transparent; border: 1px solid var(--line-soft); color: var(--para);
  border-radius: 0;
  padding: 13px 40px;
  font-family: var(--sans); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.2em; text-indent: 0.2em; font-size: 12px;
  transition: 0.4s var(--ease);
}
.menu-tabs button + button { border-left: 0; }
.menu-tabs button.active { border-color: var(--pearl); color: var(--on-pearl); background: var(--pearl); }
.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); } }
.menu-cat { break-inside: avoid; }
/* The carte's own headings, set the way the house sets them on paper: the
   name centred over its column in letterspaced caps, the note under it in the
   Didone italic, and one rule closing the block. The rule goes under the whole
   head, not off the side of the words: a line running out of the last letter
   pulls the eye away from the column it is supposed to open. */
.cat-head {
  text-align: center;
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.menu-cat h3 {
  font-family: var(--display);
  font-size: 14.5px;
  font-weight: 600;
  font-variation-settings: 'opsz' 14;
  text-transform: uppercase;
  letter-spacing: 0.32em; text-indent: 0.32em;
  color: var(--pearl);
  line-height: 1.5;
  margin: 0;
}
.menu-cat-sub {
  font-family: var(--display);
  font-style: italic;
  color: var(--brass);
  font-size: 14.5px;
  line-height: 1.4;
  margin: 7px 0 0;
}
/* Spacing between stacked categories is the grid's row gap, not a sibling
   margin: `.menu-cat + .menu-cat` also matches the category that lands in
   column two of row one, which pushed every column but the first down. */
.menu-item { display: flex; align-items: baseline; gap: 10px; padding: 7px 0; }
.menu-item .mi-name { font-family: var(--display); font-size: 17px; font-weight: 400; font-variation-settings: 'opsz' 18; color: var(--pearl); white-space: nowrap; }
.menu-item .mi-dots { flex: 1; border-bottom: 1px dotted rgba(182, 163, 161, 0.32); transform: translateY(-5px); }
.menu-item .mi-price { font-family: var(--display); font-style: italic; color: var(--brass); font-size: 15.5px; white-space: nowrap; font-variation-settings: 'opsz' 16; }
.menu-item-desc { color: var(--para); opacity: 0.78; font-size: 13.5px; margin: -4px 0 8px; max-width: 88%; }
.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(--line-soft); margin-bottom: 5px; }
.menu-item.mi-head .mi-price {
  font-family: var(--sans); font-weight: 500; font-style: normal;
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--para); opacity: 0.75;
}

/* ---------- Formule du jour ---------- */
/* The set menu is what most tables order, so it gets a band rather than a line
   inside the carte. Built from the menu category whose name contains
   "formule": rename it in the panel and this follows. */
.formule {
  background:
    linear-gradient(102deg, rgba(11, 6, 7, 0.96) 0%, rgba(30, 20, 22, 0.9) 52%, rgba(11, 6, 7, 0.97) 100%),
    var(--slats), var(--ink-2);
  border-block: 1px solid var(--line-soft);
}
.formule-inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 7vw, 100px); align-items: center; }
.formule-copy .section-title { margin-bottom: 0; font-size: clamp(34px, 3.7vw, 54px); }
.formule-copy > p { color: var(--para); margin-bottom: 26px; max-width: 44ch; }
.formule-time {
  font-family: var(--display); font-style: italic; font-size: 22px;
  color: var(--brass); margin: 20px 0 !important;
}
.formule-copy .btn { margin-top: 8px; }
/* A card pinned to the wall: the keyline frame again, this time around type */
.formule-list {
  position: relative;
  background: rgba(125, 34, 48, 0.09);
  border: 1px solid var(--line);
  padding: clamp(30px, 3.4vw, 46px) clamp(26px, 3vw, 42px);
}
.formule-list::after {
  content: ''; position: absolute; inset: 9px; pointer-events: none;
  border: 1px solid rgba(242, 230, 226, 0.1);
}
.fm-row { display: flex; align-items: baseline; gap: 12px; padding: 10px 0; }
.fm-name { font-family: var(--display); font-size: 17.5px; color: var(--pearl); }
.fm-dots { flex: 1; border-bottom: 1px dotted rgba(182, 163, 161, 0.3); transform: translateY(-4px); }
.fm-price { font-family: var(--display); font-style: italic; font-size: 16px; color: var(--brass); white-space: nowrap; }
@media (max-width: 900px) { .formule-inner { grid-template-columns: 1fr; } }

/* ---------- Le programme ---------- */
/* Seven nights, read straight off the opening hours the owner keeps in the
   panel. Nothing to upload, and it can never fall out of date. */
.programme-section { background: var(--ink-2); }
.programme-grid {
  display: grid; grid-template-columns: repeat(7, 1fr);
  border: 1px solid var(--line-soft); border-right: 0;
}
.prog-day {
  position: relative;
  border-right: 1px solid var(--line-soft);
  padding: 30px 18px 34px;
  text-align: center;
  transition: background 0.5s var(--ease);
}
.prog-day:hover { background: rgba(199, 143, 63, 0.06); }
.prog-day.today { background: rgba(125, 34, 48, 0.16); }
.prog-day.today::before {
  content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--brass);
}
.prog-name {
  display: block; font-family: var(--sans); font-weight: 500; font-size: 11.5px;
  text-transform: uppercase; letter-spacing: 0.18em; text-indent: 0.18em;
  color: var(--pearl);
}
.prog-hours { display: block; font-size: 12.5px; color: var(--para); opacity: 0.65; margin-top: 8px; letter-spacing: 0.06em; }
.prog-note {
  display: block; font-family: var(--script); font-size: 27px; line-height: 1.15;
  color: var(--brass); margin-top: 16px; min-height: 34px;
}
.prog-note:empty::before { content: '·'; opacity: 0.3; }
.prog-day.shut .prog-hours { color: var(--err); opacity: 0.8; }
@media (max-width: 1100px) { .programme-grid { grid-template-columns: repeat(4, 1fr); border-bottom: 0; } .prog-day { border-bottom: 1px solid var(--line-soft); } }
@media (max-width: 620px) { .programme-grid { grid-template-columns: repeat(2, 1fr); } .prog-note { font-size: 23px; } }

/* ---------- Spaces ---------- */
.spaces-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.space-card { position: relative; overflow: hidden; aspect-ratio: 3 / 4.2; border-radius: 1px; }
.space-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.space-card:hover img { transform: scale(1.07); }
.space-card::before {
  content: ''; position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(180deg, transparent 46%, rgba(11, 6, 7, 0.92));
}
/* The keyline, matching the framed photographs elsewhere */
.space-card::after {
  content: ''; position: absolute; inset: 12px; z-index: 3; pointer-events: none;
  border: 1px solid rgba(242, 230, 226, 0.22);
  transition: inset 0.7s var(--ease), border-color 0.7s var(--ease);
}
.space-card:hover::after { inset: 18px; border-color: var(--brass); }
.space-card figcaption {
  position: absolute; left: 0; right: 0; bottom: 30px; z-index: 4;
  text-align: center;
  font-family: var(--sans); font-weight: 500;
  font-size: 13px; letter-spacing: 0.22em; text-indent: 0.22em; text-transform: uppercase; color: var(--pearl);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6);
}
.space-card figcaption small:empty { display: none; }
.space-card figcaption small {
  display: block;
  font-family: var(--sans); font-weight: 300;
  font-size: 12px; letter-spacing: 0.12em; text-indent: 0.12em; text-transform: uppercase;
  color: var(--brass); margin-top: 7px; line-height: 1.4;
}

/* ---------- Gallery ---------- */
.gallery-section { background: var(--ink-2); }
/* Six pictures on a three by three grid: the lead takes four cells, the other
   five take one each, and the nine tile exactly. Every cell is the same 16:10,
   so the set reads as one edit rather than a pile of stock. The row height is
   tied to the column width so that aspect holds at any screen size. A marquee
   says "we have photographs"; a grid says which one matters. */
.gal-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: calc((min(1200px, 90vw) - 28px) / 3 * 0.625);
  gap: 14px;
}
.gal-grid figure { position: relative; overflow: hidden; margin: 0; cursor: zoom-in; }
.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;
  filter: saturate(0.94);
  transition: transform 1.2s var(--ease), filter 0.6s var(--ease);
}
.gal-grid figure::after {
  content: ''; position: absolute; inset: 10px; pointer-events: none;
  border: 1px solid rgba(242, 230, 226, 0.16);
  transition: inset 0.6s var(--ease), border-color 0.6s var(--ease);
}
.gal-grid figure:hover img { transform: scale(1.05); filter: saturate(1.06) brightness(1.06); }
.gal-grid figure:hover::after { inset: 16px; border-color: var(--brass); }
@media (max-width: 760px) {
  .gal-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: calc(45vw * 0.625); gap: 10px; }
  .gal-grid figure:nth-child(1) { grid-column: span 2; grid-row: span 2; }
  .gal-grid figure::after { inset: 7px; }
  .gal-grid figure:hover::after { inset: 11px; }
}

.lightbox {
  position: fixed; inset: 0; z-index: 90; background: rgba(11, 6, 7, 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; box-shadow: 0 40px 100px rgba(0, 0, 0, 0.6); }
.lightbox button {
  position: absolute; background: none; border: 1px solid var(--line-soft); color: var(--pearl);
  width: 48px; height: 48px; font-size: 18px; transition: 0.35s; display: grid; place-items: center;
}
.lightbox button:hover { border-color: var(--brass); color: var(--brass); }
.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(--line-soft); font-size: 15px; }
.hours-list .day-col { min-width: 160px; display: flex; flex-direction: column; gap: 3px; }
.hours-list .day { font-family: var(--sans); font-weight: 500; text-transform: uppercase; letter-spacing: 0.16em; text-indent: 0.16em; font-size: 11.5px; color: var(--pearl); }
.hours-list .day-note { font-family: var(--script); font-size: 22px; line-height: 1.1; color: var(--brass); }
.hours-list .dots { flex: 1; border-bottom: 1px dotted rgba(182, 163, 161, 0.26); transform: translateY(-4px); }
.hours-list .time { color: var(--pearl-dim); letter-spacing: 0.06em; }
.hours-list .closed { color: var(--err); font-family: var(--display); font-style: italic; }
.contact-lines { margin-top: 30px; display: grid; gap: 12px; color: var(--para); font-size: 15px; }
.contact-lines a:hover { color: var(--brass); }
.contact-lines strong { color: var(--brass); font-weight: 400; }
#map { min-height: 440px; height: 100%; border: 1px solid var(--line); border-radius: 1px; z-index: 1; }
#map .leaflet-tile-pane { filter: invert(1) hue-rotate(185deg) brightness(0.86) contrast(0.86) saturate(0.5); }
#map .leaflet-control-attribution { background: rgba(11, 6, 7, 0.7); color: var(--para); }
#map .leaflet-control-attribution a { color: var(--brass); }
#map .leaflet-bar a { background: var(--panel); color: var(--pearl); border-bottom-color: var(--line); }
#map .leaflet-bar a:hover { background: var(--panel-2); color: var(--brass); }
.map-pin { position: relative; width: 22px; height: 22px; }
.map-pin::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: var(--wine); border: 3px solid var(--pearl);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}
.map-pin::after {
  content: ''; position: absolute; inset: -12px; border-radius: 50%;
  border: 2px solid var(--brass);
  animation: pin-pulse 2.4s ease-out infinite;
}
@keyframes pin-pulse {
  from { transform: scale(0.5); opacity: 0.9; }
  to { transform: scale(1.3); opacity: 0; }
}
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--pearl); color: var(--on-pearl); border-radius: 1px; }
.leaflet-popup-content a { color: var(--wine); font-weight: 500; }

/* ---------- Reservation ---------- */
.reserve-section { background: linear-gradient(rgba(11, 6, 7, 0.9), rgba(11, 6, 7, 0.95)), url('../images/space-restaurant.jpg') center/cover fixed; }
.reserve-panel {
  position: relative;
  max-width: 780px; margin: 0 auto;
  background: rgba(21, 12, 14, 0.88);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  padding: clamp(36px, 5vw, 68px);
}
.reserve-panel::after {
  content: ''; position: absolute; inset: 10px; pointer-events: none;
  border: 1px solid rgba(242, 230, 226, 0.09);
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 38px; }
.form-field { display: grid; gap: 9px; }
.form-field.full { grid-column: 1 / -1; }
.form-field label { font-family: var(--sans); font-weight: 500; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.22em; text-indent: 0.22em; color: var(--brass); }
.form-field input, .form-field select {
  background: rgba(11, 6, 7, 0.6);
  border: 1px solid var(--line-soft);
  color: var(--pearl);
  padding: 15px 16px;
  font-family: var(--sans); font-size: 15px; font-weight: 300; letter-spacing: 0.02em;
  transition: border-color 0.35s;
  width: 100%; border-radius: 1px; appearance: none;
}
.form-field input:focus, .form-field select:focus { outline: none; border-color: var(--brass); }
.form-field input::placeholder { color: rgba(182, 163, 161, 0.42); }
.form-field select {
  background-image: linear-gradient(45deg, transparent 50%, var(--brass) 50%), linear-gradient(135deg, var(--brass) 50%, transparent 50%);
  background-position: calc(100% - 20px) 55%, calc(100% - 15px) 55%;
  background-size: 5px 5px; background-repeat: no-repeat;
}
.form-field select option { background: var(--panel); color: var(--pearl); }
.form-field input[type='date'], .form-field input[type='time'] { color-scheme: dark; }
.phone-row { display: grid; grid-template-columns: 136px 1fr; gap: 10px; }
.form-note { color: var(--para); opacity: 0.78; font-size: 13px; margin-top: 20px; text-align: center; }
.form-submit { margin-top: 34px; text-align: center; }
.form-msg { margin-top: 20px; text-align: center; 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: 7px; font-size: 12.5px; color: rgba(182, 163, 161, 0.6); letter-spacing: 0.02em; }
.prefill-note { color: var(--brass); font-size: 13px; margin-top: 12px; }

/* ---------- Footer ---------- */
footer { background: var(--ink-2); border-top: 1px solid var(--line-soft); padding: 76px 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: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.26em; text-indent: 0.26em;
  margin-bottom: 20px; color: var(--brass);
}
.footer-grid p, .footer-grid a, .footer-grid li { color: var(--para); font-size: 14px; list-style: none; }
.footer-grid a:hover { color: var(--brass); }
.footer-grid ul { display: grid; gap: 10px; }
.footer-logo { height: 62px; width: auto; margin-bottom: 20px; }
.socials { display: flex; gap: 12px; margin-top: 24px; }
.socials a {
  width: 42px; height: 42px; display: grid; place-items: center;
  border: 1px solid var(--line-soft); border-radius: 1px; color: var(--pearl-dim);
  transition: color 0.35s var(--ease), border-color 0.35s var(--ease), transform 0.35s var(--ease);
}
.socials a svg { width: 17px; height: 17px; fill: currentColor; display: block; }
.socials a:hover { color: var(--brass); border-color: var(--brass); transform: translateY(-3px); }
.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(--para); opacity: 0.8; font-size: 12px; letter-spacing: 0.08em;
}
.footer-bottom a:hover { color: var(--brass); }

/* ---------- Subpages ---------- */
.page-hero { height: 50vh; 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(11, 6, 7, 0.76) 0%, rgba(11, 6, 7, 0.54) 45%, rgba(11, 6, 7, 0.9) 100%);
}
.hero-video { display: block; }
.page-hero .hero-video { filter: blur(3px) saturate(0.95); 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(38px, 5.6vw, 72px); position: relative; z-index: 2; letter-spacing: -0.012em; }
.page-hero .kicker { position: relative; z-index: 2; }
.legal { max-width: 820px; margin: 0 auto; }
.legal h1 { letter-spacing: -0.01em; }
.legal h2 { font-family: var(--sans); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.26em; text-indent: 0.26em; margin: 48px 0 16px; color: var(--brass); font-weight: 500; }
.legal p, .legal li { color: var(--para); font-size: 15px; margin-bottom: 12px; }
.legal ul { padding-left: 20px; }

/* ---------- Toast ---------- */
.toast {
  position: fixed; bottom: 30px; left: 50%; transform: translate(-50%, 20px);
  background: var(--panel); border: 1px solid var(--brass); color: var(--pearl);
  padding: 15px 30px; font-size: 13.5px; letter-spacing: 0.05em; z-index: 100;
  opacity: 0; pointer-events: none; transition: 0.45s var(--ease);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Account ---------- */
.nav-auth {
  border: 1px solid var(--line); border-radius: 1px;
  padding: 10px 20px !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 { background: var(--pearl); border-color: var(--pearl); color: var(--on-pearl) !important; }
.nav-auth.signed-in { border-color: var(--brass); color: var(--brass) !important; }
.nav-auth.signed-in:hover { background: var(--brass); border-color: var(--brass); color: var(--on-pearl) !important; }

.page-account { background: var(--ink-2); }
.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(11, 6, 7, .70), rgba(11, 6, 7, .84) 55%, rgba(11, 6, 7, .95));
}
.page-account .nav {
  background: rgba(11, 6, 7, 0.95); backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--line-soft); padding: 10px 0;
}
.page-account .nav-logo img { height: 46px; filter: none; }
.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(11, 6, 7, .6); }

.auth-wrap { display: flex; justify-content: center; width: 100%; }
.auth-card {
  position: relative;
  width: min(580px, 100%); background: rgba(21, 12, 14, 0.9); border: 1px solid var(--line);
  border-radius: 1px; padding: 34px 36px; text-align: center;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 34px 80px rgba(0, 0, 0, 0.55);
}
.auth-card::after { content: ''; position: absolute; inset: 9px; pointer-events: none; border: 1px solid rgba(242, 230, 226, 0.08); }
.auth-card > * { position: relative; z-index: 1; }
.auth-logo { width: 130px; height: auto; margin: 0 auto 10px; display: block; }
.auth-card .section-title { font-size: 27px; margin: 0 0 6px; }
.auth-sub { color: var(--para); font-size: 13px; line-height: 20px; margin-bottom: 16px; }
.auth-form { display: grid; gap: 6px; text-align: left; }
#signupForm { grid-template-columns: 1fr 1fr; column-gap: 14px; }
#signupForm .full { grid-column: 1 / -1; }
.auth-form label {
  font-family: var(--sans); font-weight: 500; font-size: 10px; text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--brass); margin-top: 8px;
}
.auth-form input {
  width: 100%; background: rgba(11, 6, 7, 0.7); border: 1px solid var(--line-soft);
  border-radius: 1px; padding: 12px 13px; color: var(--pearl);
  font-family: var(--sans); font-size: 14.5px;
}
.auth-form input:focus { outline: none; border-color: var(--brass); }
.auth-form .btn { margin-top: 16px; width: 100%; }
.auth-form .btn.ghost { margin-top: 8px; }
.auth-hint { font-size: 10.5px; color: var(--para); opacity: 0.7; line-height: 16px; margin-top: 4px; }
.gender-row { display: flex; gap: 8px; }
.gender-row button {
  flex: 1; background: rgba(11, 6, 7, 0.7); border: 1px solid var(--line-soft); border-radius: 1px;
  color: var(--para); padding: 10px 6px; font-size: 13px; font-family: var(--sans); transition: .3s;
}
.gender-row button:hover { border-color: var(--brass); }
.gender-row button.active { border-color: var(--brass); background: var(--brass-soft); color: var(--brass); }
.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(--para); text-align: center; margin-top: 12px; grid-column: 1 / -1; }
.auth-switch a { color: var(--brass); text-decoration: underline; }
.pending-title { font-family: var(--display); font-size: 24px; font-weight: 400; margin-bottom: 8px; color: var(--pearl); }

.auth-form select {
  width: 100%; background: rgba(11, 6, 7, 0.7); border: 1px solid var(--line-soft);
  border-radius: 1px; padding: 12px 13px; color: var(--pearl);
  font-family: var(--sans); font-size: 14.5px; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--brass) 50%),
                    linear-gradient(135deg, var(--brass) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.auth-form select:focus { outline: none; border-color: var(--brass); }
.auth-form select option { background: var(--panel); color: var(--pearl); }

.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 46px; }
.pw-eye {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  background: none; border: 0; cursor: pointer; line-height: 0;
  padding: 9px 11px; color: var(--para); opacity: .8; transition: color .25s, opacity .25s;
}
.pw-eye svg { width: 21px; height: 21px; fill: currentColor; display: block; }
.pw-eye .eye-shut { display: none; }
.pw-eye.on { color: var(--brass); opacity: 1; }
.pw-eye.on .eye-open { display: none; }
.pw-eye.on .eye-shut { display: block; }
.pw-eye:hover { color: var(--pearl); opacity: 1; }

.auth-form label.stay-row {
  display: flex; align-items: center; gap: 9px; margin-top: 12px;
  font-family: var(--sans); font-size: 13px; text-transform: none; letter-spacing: 0.01em;
  color: var(--para); cursor: pointer;
}
.stay-row input { width: 16px; height: 16px; accent-color: var(--brass); 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: 13px; color: var(--brass); text-decoration: underline; white-space: nowrap; }
.forgot-link:hover { color: var(--pearl); }
.birthday-note {
  font-size: 12px; color: var(--brass); margin-top: 10px; text-align: center;
  background: var(--brass-soft); border: 1px solid var(--line); border-radius: 1px; padding: 10px 12px;
}

.member-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; margin: 28px 0 42px; }
.member-card {
  background: rgba(21, 12, 14, .86); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--line); border-radius: 1px; padding: 28px;
}
.member-card h3 { font-family: var(--display); font-size: 21px; font-weight: 400; margin-bottom: 8px; }
.member-card .btn { margin-top: 16px; width: 100%; text-align: center; }
.member-card .muted { color: var(--para); font-size: 14px; }

.fidelity-card { background: linear-gradient(140deg, var(--wine), #4a1620 62%, var(--panel)); border-color: rgba(199, 143, 63, 0.4); }
.fidelity-card .kicker { display: block; margin-bottom: 8px; }
.fidelity-card b { font-family: var(--display); font-size: 56px; font-weight: 400; color: var(--pearl); line-height: 1; }
.fidelity-card p { color: var(--para); font-size: 13px; margin-top: 12px; line-height: 20px; }
.fidelity-card.off b { color: var(--para); opacity: 0.6; }

.member-heading { font-family: var(--display); font-size: 24px; font-weight: 400; margin-bottom: 18px; color: var(--pearl); }
.res-list { display: grid; gap: 12px; }
.res-card {
  display: flex; align-items: center; gap: 18px; background: rgba(21, 12, 14, .86);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--line-soft); border-radius: 1px; padding: 17px 22px;
}
.res-when { display: grid; min-width: 92px; }
.res-when b { font-family: var(--display); font-size: 20px; font-weight: 400; color: var(--brass); }
.res-when span { font-size: 12px; color: var(--para); opacity: 0.8; }
.res-meta { display: grid; flex: 1; }
.res-meta b { font-size: 14px; font-weight: 400; color: var(--pearl); }
.res-meta span { font-size: 12px; color: var(--para); opacity: 0.7; }
.res-badge { font-family: var(--sans); font-weight: 500; font-size: 10.5px; letter-spacing: 0.14em; text-indent: 0.14em; text-transform: uppercase; padding: 6px 13px; border-radius: 1px; border: 1px solid; }
.res-badge.pending { color: var(--brass); border-color: rgba(199, 143, 63, 0.5); }
.res-badge.confirmed { color: var(--ok); border-color: rgba(143, 174, 139, 0.5); }
.res-badge.cancelled { color: var(--err); border-color: rgba(223, 163, 156, 0.5); }

.hidden { display: none !important; }

/* ---------- Contact band ---------- */
.contact-band {
  position: relative; padding: 100px 0; overflow: hidden;
  background: url('/images/contact-bg.jpg') center/cover no-repeat fixed;
}
.contact-band::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11, 6, 7, .93), rgba(30, 20, 22, .86) 45%, rgba(11, 6, 7, .95));
}
.contact-band > .container { position: relative; }
.contact-inner { text-align: center; max-width: 1080px; margin: 0 auto; }
.contact-inner .section-title { font-size: clamp(36px, 4.8vw, 58px); }
.contact-lead { color: var(--para); max-width: 620px; margin: 24px auto 44px; line-height: 27px; }

.contact-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(238px, 1fr)); gap: 14px; margin-bottom: 40px; }
.contact-card {
  display: flex; align-items: center; gap: 15px; text-align: left; text-decoration: none;
  background: rgba(21, 12, 14, 0.78); border: 1px solid var(--line); border-radius: 1px;
  padding: 19px 21px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: border-color .35s var(--ease), transform .35s var(--ease), background .35s var(--ease);
}
a.contact-card:hover { border-color: var(--brass); transform: translateY(-3px); background: rgba(30, 20, 22, 0.92); }
.cc-icon {
  width: 42px; height: 42px; flex: none; border-radius: 1px; display: grid; place-items: center;
  background: var(--brass-soft); border: 1px solid var(--line);
}
.cc-icon svg { width: 16px; height: 16px; fill: var(--brass); }
.cc-body { display: grid; gap: 3px; min-width: 0; }
.cc-body small { font-family: var(--sans); font-weight: 500; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brass); }
.cc-body b { font-weight: 300; font-size: 14px; line-height: 1.4; color: var(--pearl); overflow-wrap: anywhere; }

.contact-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 32px; }
.contact-band .socials { justify-content: center; }

/* ---------- Deals ---------- */
.deals-main { align-items: flex-start; padding-top: 120px; }
.deals-main .section-head { margin-bottom: 32px; }
.deals-empty {
  background: rgba(21, 12, 14, .86); border: 1px solid var(--line); border-radius: 1px;
  padding: 44px 32px; text-align: center; color: var(--para); max-width: 580px; margin: 0 auto;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.deals-empty .contact-actions { margin-top: 24px; margin-bottom: 0; }
.deal-group { margin-bottom: 42px; }
.deal-group h2 { font-family: var(--sans); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.26em; text-indent: 0.26em; color: var(--brass); font-weight: 500; 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(21, 12, 14, .9); border: 1px solid rgba(199, 143, 63, .32); border-radius: 1px;
  padding: 15px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: transform .35s var(--ease), border-color .35s var(--ease);
}
.deal-card:hover { transform: translateY(-3px); border-color: var(--brass); }
.deal-card img { width: 74px; height: 74px; border-radius: 1px; object-fit: cover; flex: none; }
.deal-body { min-width: 0; flex: 1; }
.deal-body h3 { font-family: var(--display); font-size: 18px; font-weight: 400; margin-bottom: 3px; }
.deal-body p { color: var(--para); font-size: 12px; opacity: .8; 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(--para); opacity: .55; font-size: 13px; }
.deal-prices b { font-family: var(--display); color: var(--brass); font-size: 18px; font-weight: 400; }
.deal-badge {
  position: absolute; top: 12px; right: 12px; background: var(--brass-soft);
  color: var(--brass); border-radius: 1px; padding: 4px 11px;
  font-family: var(--sans); font-weight: 500; font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
}
.mi-was { color: var(--para); opacity: 0.5; margin-right: 10px; font-size: 0.92em; }
.mi-deal { color: var(--ok); font-weight: 400; font-style: normal; }
.nav-deals { color: var(--brass) !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: 11px; text-transform: uppercase; letter-spacing: 0.18em; text-indent: 0.18em;
  color: var(--brass); margin-bottom: 12px; font-weight: 500;
}
.del-list { list-style: none; display: grid; gap: 9px; }
.del-list li { position: relative; padding-left: 20px; font-size: 14px; line-height: 1.6; color: var(--para); }
.del-list li::before { content: ''; position: absolute; left: 0; top: 10px; width: 7px; height: 1px; background: var(--brass); }
.del-note { font-size: 13px; color: var(--para); 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: rgba(11, 6, 7, 0.6); border: 1px solid var(--line-soft); color: var(--para);
  padding: 15px 16px; font-family: var(--sans); font-size: 15px; font-weight: 300;
  letter-spacing: 0.02em; text-align: left; border-radius: 1px;
  transition: border-color 0.35s, color 0.35s;
}
.timepick-btn:hover, .timepick-btn.open { border-color: var(--brass); }
.timepick-btn.chosen { color: var(--pearl); }
.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(--brass);
  transition: transform 0.3s var(--ease);
}
.timepick-btn.open .tp-caret { transform: rotate(180deg); }
.timepick-btn svg { width: 16px; height: 16px; fill: var(--brass); 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(--panel); border: 1px solid var(--line);
  box-shadow: 0 20px 46px rgba(0, 0, 0, 0.55);
}
.timepick-panel[hidden] { display: none; }
.timepick-slot {
  background: rgba(242, 230, 226, 0.035); border: 1px solid transparent; color: var(--para);
  padding: 10px 4px; font-family: var(--sans); font-size: 13.5px; letter-spacing: 0.04em;
  border-radius: 1px;
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}
.timepick-slot:hover { background: var(--brass-soft); color: var(--pearl); border-color: var(--brass); }
.timepick-slot.on { background: var(--pearl); color: var(--on-pearl); border-color: var(--pearl); }
.timepick-panel::-webkit-scrollbar { width: 6px; }
.timepick-panel::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
@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(--ink-2); transition: opacity .3s ease;
}
.page-boot.gone { opacity: 0; pointer-events: none; }
.boot-mark { position: relative; width: 120px; height: 120px; display: grid; place-items: center; }
.boot-mark img { width: 76px; height: auto; }
.boot-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid rgba(242, 230, 226, 0.14); border-top-color: var(--brass);
  animation: bootSpin 1s linear infinite;
}
@keyframes bootSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .boot-ring { animation-duration: 2.6s; } }

/* ---------- Marketing ---------- */
.promo-banner {
  position: fixed; inset: 0 0 auto 0; z-index: 70;
  background: var(--wine);
  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
  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(--pearl); font-weight: 400;
  font-family: var(--sans); font-weight: 500; font-size: 13.5px; letter-spacing: 0.14em; text-decoration: none;
  text-transform: uppercase;
}
a.promo-banner-text:hover { color: #fff; }
@keyframes promo-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .promo-track { animation: none; } }
@media (max-width: 860px) { .promo-banner { font-size: 13px; padding: 8px 14px; } }

.promo-notice {
  display: block; margin: 0 auto 28px; max-width: 660px;
  background: var(--wine); color: var(--pearl); font-weight: 400;
  border-radius: 1px; padding: 12px 28px;
  font-family: var(--sans); font-weight: 500; text-align: center; font-size: 13.5px; letter-spacing: 0.12em; 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: 50px; }
  .nav.scrolled .nav-logo img { height: 42px; }
  .nav-links {
    position: fixed; inset: 0; height: 100svh;
    background: var(--ink-2);
    flex-direction: column; justify-content: center; align-items: center; gap: 24px;
    /* clip-path rather than translateX: a translated full-screen panel widens
       the layout viewport and lets the page pan sideways on phones */
    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: 18px; letter-spacing: 0.3em; text-indent: 0.3em; }
  .nav-links .nav-cta { border: 1px solid var(--brass); 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-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: 11px; letter-spacing: 0.18em; text-indent: 0.18em; }
}
@media (max-width: 900px) {
  .about-grid, .info-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  #map { min-height: 340px; }
  .footer-grid { grid-template-columns: 1fr; gap: 34px; }
  /* iOS ignores background-attachment: fixed; keep these bands readable */
  #menu.menu-section, .reserve-section, .contact-band, body { 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 { aspect-ratio: 16 / 11; }
  .hero-actions .btn { width: 100%; text-align: center; }
  .hero-tag { letter-spacing: 0.34em; text-indent: 0.34em; }
  .menu-item { flex-wrap: wrap; }
  .menu-item .mi-name { white-space: normal; max-width: 75%; }
  .menu-item .mi-dots { min-width: 20px; }
  /* Two price columns have to survive a narrow screen. Wrapping put the bottle
     price on its own line under long names, so here the row never wraps: the
     name takes the slack and the two figures hold their columns. */
  .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; }
}
@media (max-width: 720px) {
  .account-main { padding: 110px 0 50px; min-height: auto; }
  .nav-auth { padding: 8px 14px !important; font-size: 11px; }
  .auth-card { padding: 26px 20px; }
  #signupForm { grid-template-columns: 1fr; }
  .res-card { flex-wrap: wrap; gap: 10px; }
  .res-when { min-width: 70px; }
  .contact-band { padding: 72px 0; }
  .contact-cards { grid-template-columns: minmax(0, 1fr); }
  .contact-actions .btn { width: 100%; }
}
/* On a short screen, centring a tall card pushes it below the fold */
@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; }
  .hero-content > * { opacity: 1; transform: none; }
  .hero video { display: none; }
}