/* L’Artiste design system.
   Everything here is taken off the house's own identity rather than invented:
   the mark is a gold ring on black with a musical note for the apostrophe and
   RESTAURANT · LOUNGE · BAR run around it; every post the house publishes is
   framed in registration corner marks like a shot being lined up; the room is
   candlelit noir with petrol ceramics and a blue-lit backbar. So the site is a
   dark house with the light doing the sectioning: a spotlight from above, the
   soft rhythm of a curtain in the dark bands, the gold of the ring as the
   voice of every price and every rule.

   One motif, and it is used once rather than everywhere: the corner marks.
   The framing brackets from the house's own posts are the shape every button
   takes, and that is all. A bracket repeated behind every heading stops being
   a signature and becomes clip-art. Everything else earns its place by
   holding type or holding a photograph. */

/* The body/UI voice is Oswald (Google, OFL — free to embed), a condensed
   signage face with the full accented Latin set Revamped was missing. Relidux
   stays self-hosted for the nav bar alone, where its geometric caps carry the
   wordmark. */
@font-face {
  font-family: 'Relidux';
  src: url('/vendor/relidux/Relidux.woff2') format('woff2'),
       url('/vendor/relidux/Relidux.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink: #14100d;         /* the candlelit noir of the room, warm, never blue */
  --ink-2: #0c0a08;       /* the deepest band, the house before the lights */
  --panel: #1d1712;       /* a card on the noir */
  --panel-2: #241c15;
  --pearl: #f1e8da;       /* the ivory of the plate rims, and every action */
  --pearl-dim: #cfc2ae;
  /* The paragraph voice: warm greige, never pure grey, which goes cold
     against the noir. */
  --para: #b0a795;
  --brass: #c9a45c;       /* the gold of the ring. The second voice, never the first */
  --brass-soft: rgba(201, 164, 92, 0.13);
  --wine: #8f3226;        /* muted red, kept for errors and destructive actions only */
  --scene: #2e6b70;       /* the stage wash: the petrol of the house ceramics and the lit backbar */
  --scene-soft: rgba(46, 107, 112, 0.14);
  --on-pearl: #14100d;    /* what sits on top of a cream fill */
  --line: rgba(241, 232, 218, 0.16);
  --line-soft: rgba(241, 232, 218, 0.08);
  --ok: #8fae8b;
  --err: #dfa39c;

  /* The paper. Two bands of the site are printed rather than lit: the carte
     and the hours, set like the programme card slipped onto the table. Warm
     ivory, never white, with the room's own noir as the ink and a darker gold
     that still has contrast on it. */
  --paper: #f0e9dc;
  --paper-2: #e6dcc6;
  --ink-on-paper: #201914;
  --para-on-paper: #5a5348;
  /* Gold has to go darker on a light ground than it does on a dark one or it
     stops being readable: the prices are set in it at 15px, and the champagne
     sheet has fibre in it that runs down to 206. This clears 5:1 against the
     darkest part of the sheet. */
  --gold-on-paper: #7c5c1c;
  --rule-on-paper: rgba(32, 25, 20, 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(201, 164, 92, 0.20), transparent 72%);
  --gilt-tl: radial-gradient(75% 60% at 10% 0%, rgba(201, 164, 92, 0.18), transparent 72%);
  --gilt-bc: radial-gradient(85% 65% at 50% 100%, rgba(201, 164, 92, 0.18), transparent 74%);
  --gilt-sweep: linear-gradient(104deg, transparent 6%, rgba(201, 164, 92, 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(201, 164, 92, 0.17), rgba(201, 164, 92, 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(201, 164, 92, 0.5) 18%, rgba(201, 164, 92, 0.5) 82%, transparent);

  --display: 'Prata', 'Playfair Display', Georgia, serif;
  --sans: 'Oswald', 'Segoe UI', system-ui, sans-serif;
  /* The nav bar keeps Relidux; everything else speaks in --sans (Oswald). */
  --nav-face: 'Relidux', 'Segoe UI', system-ui, sans-serif;
  /* Ephesis is the artist's signature, and it signs exactly two things: the
     hero, once, and what plays tonight — the night on the programme strip,
     the night beside the hours, the note under a carte category. It is never
     used as decoration inside a heading. */
  --script: 'Ephesis', cursive;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* The curtain. The dark bands carry the rhythm of a stage drape at a
     whisper: wide soft pleats, a fold of shadow between them, felt rather
     than read. Drawn, so it costs nothing and holds at any width. */
  --slats: repeating-linear-gradient(90deg,
    rgba(241, 232, 218, 0.012) 0 30px,
    rgba(0, 0, 0, 0.10) 74px,
    rgba(241, 232, 218, 0.008) 118px);
  /* The spot: one warm light from above centre stage, the way the room lights
     a table. It is the only light source the page admits to. */
  --lamp: radial-gradient(closest-side at 50% -12%,
    rgba(201, 164, 92, 0.17), rgba(201, 164, 92, 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: 400;
  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, .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 letterpress slab caps on a badge, so the headings are too:
   Graduate, worn like stencilled crate lettering. It ships a single 400, so
   nothing here may ask for more or the browser fakes a bold and the slab
   serifs clog. Air between the letters, not weight, is what makes it carry. */
h1, h2, h3 {
  font-family: var(--display);
  font-weight: 400;
  color: var(--pearl);
  line-height: 1.14;
}

/* 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;
}
/* The rule the eyebrow rides fades out before the margin, the way a spot
   falls off at its edge: struck, not drawn. */
.kicker::after { content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, rgba(201, 164, 92, 0.45), var(--line) 55%, transparent); }
/* 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: linear-gradient(270deg, rgba(201, 164, 92, 0.45), var(--line) 55%, transparent); }

.section-title {
  font-size: clamp(29px, 3.8vw, 52px);
  margin: 26px 0 0;
  letter-spacing: 0.02em;
  font-weight: 400;
  max-width: 24ch;
}
.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 ---------- */
/* Every button is a framing: the registration corner marks the house draws
   around its own posts, set just off the corners of a hairline plate. On
   hover the marks draw in and the plate fills — the shot is lined up, then
   taken. A rectangle reads as a default and a pill reads as everybody
   else's; a framed plate reads as this house.

   ::before is the top-left pair of marks and ::after the bottom-right, each
   an L of two borders. They sit 5px outside the plate at rest and travel to
   meet it, so the hover reads as the frame closing rather than as a glow. */
.btn {
  display: inline-block;
  position: relative;
  padding: 16px 44px;
  border: 1px solid rgba(201, 164, 92, 0.55);
  border-radius: 0;
  background: transparent;
  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), border-color 0.45s var(--ease);
}
.btn::before, .btn::after {
  content: '';
  position: absolute; width: 10px; height: 10px; pointer-events: none;
  transition: transform 0.45s var(--ease), opacity 0.45s var(--ease);
}
.btn::before { top: -5px; left: -5px; border-top: 1px solid var(--brass); border-left: 1px solid var(--brass); }
.btn::after { bottom: -5px; right: -5px; border-bottom: 1px solid var(--brass); border-right: 1px solid var(--brass); }
.btn:hover { color: var(--on-pearl); background: var(--pearl); border-color: var(--pearl); }
.btn:hover::before { transform: translate(5px, 5px); }
.btn:hover::after { transform: translate(-5px, -5px); }

.btn.solid { background: var(--pearl); border-color: var(--pearl); color: var(--on-pearl); font-weight: 600; }
.btn.solid:hover { background: var(--brass); border-color: var(--brass); color: var(--on-pearl); }

.btn.ghost { border-color: rgba(241, 232, 218, 0.3); color: var(--para); }
.btn.ghost:hover { background: var(--pearl); border-color: var(--pearl); color: var(--on-pearl); }

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

.btn.danger { background: var(--wine); border-color: var(--wine); color: #fff; }
.btn.danger::before, .btn.danger::after { border-color: var(--err); }
.btn.danger:hover { background: transparent; border-color: var(--err); color: var(--err); }

/* The chips in the bar and the carte's tabs stay plain plates: the corner
   marks belong to the buttons alone, or the signature stops being one. */
.nav-cta, .nav-auth, .menu-tabs button { 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(201, 164, 92, 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(12, 10, 8, 0.95) 0%, rgba(22, 56, 60, 0.78) 52%, rgba(12, 10, 8, 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. */
/* An actual sheet rather than a flat fill: laid paper with the grain and the
   horizontal line in it, and the bokeh of the backbar blown almost to white
   behind it so there is light in the stock. Fixed, so the two printed bands
   read as one sheet running behind the whole page rather than as two panels
   that each happen to be beige. */
section.paper {
  background-color: var(--paper);
  background-image:
    radial-gradient(100% 68% at 50% -8%, rgba(255, 255, 255, 0.5), transparent 68%),
    url('../images/paper.jpg');
  background-size: auto, cover;
  background-position: center, center;
  background-repeat: no-repeat;
  background-attachment: scroll, fixed;
  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(32, 25, 20, 0.28) 18%, rgba(32, 25, 20, 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(32, 25, 20, 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(32, 25, 20, 0.22); }
.paper .hours-list .time { color: var(--para-on-paper); }
.paper .hours-list .closed { color: #8f3226; }
.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(240, 233, 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 plate and the marks are the ink of the band */
.paper .btn { border-color: rgba(32, 25, 20, 0.45); color: var(--ink-on-paper); background: transparent; }
.paper .btn::before { border-top-color: var(--gold-on-paper); border-left-color: var(--gold-on-paper); }
.paper .btn::after { border-bottom-color: var(--gold-on-paper); border-right-color: var(--gold-on-paper); }
.paper .btn:hover { background: var(--ink-on-paper); border-color: var(--ink-on-paper); color: var(--paper); }
.paper .btn.solid { background: var(--ink-on-paper); border-color: var(--ink-on-paper); color: var(--paper); }
.paper .btn.solid:hover { background: var(--gold-on-paper); border-color: var(--gold-on-paper); color: #fff; }
.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;
  /* Pin the bar to its own compositing layer. Without it, iOS Safari paints
     scrolling content (the About images) OVER the fixed nav during the
     dynamic-toolbar resize, leaving a block stuck above the bar. */
  transform: translateZ(0); -webkit-transform: translateZ(0);
  transition: background 0.5s, padding 0.5s, box-shadow 0.5s;
}
.nav.scrolled {
  background: rgba(12, 10, 8, 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 */
/* While the full-screen panel is open, release both the backdrop-filter and the
   transform: either one would make .nav the containing block for the fixed
   panel and trap it inside the bar. */
.nav.menu-open, .nav.scrolled.menu-open { backdrop-filter: none; -webkit-backdrop-filter: none; background: transparent; box-shadow: none; transform: none; -webkit-transform: none; }
.nav .container { width: min(1640px, 96vw); }
.nav-inner { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 20px; }
.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: 18px; align-items: center; list-style: none; grid-column: 2; grid-row: 1; justify-content: center; }
.nav-right { display: flex; gap: 12px; 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(--nav-face);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  text-indent: 0.07em;
  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 underline is a bow stroke: a hairline that draws in from the left and
   lands on a small gold note-head at its end. Drawn once, here only. */
.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 3h92' fill='none' stroke='%23c9a45c' stroke-width='1.1'/%3E%3Ccircle cx='96' cy='3' r='2.4' fill='%23c9a45c'/%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; }
/* The carte link is an outlined pill: white hairline border, gold on hover. */
.nav-links a[href="/menu"] {
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 999px;
  padding: 7px 18px;
  opacity: 1;
}
.nav-links a[href="/menu"]::after { display: none; }
.nav-links a[href="/menu"]:hover { color: var(--brass); border-color: var(--brass); }
.nav-links > li > a, .nav-right > li > a { white-space: nowrap; }
.nav-cta {
  background: var(--brass); border: 1px solid var(--brass); color: var(--ink-2) !important;
  padding: 10px 18px !important; border-radius: 1px; font-weight: 600;
}
.nav-cta:hover { background: #e4bd6e; border-color: #e4bd6e; color: var(--ink-2) !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(--nav-face); 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; }
/* The three films are stacked; the live one sits at translateX(0), the one
   leaving drifts left, the ones waiting sit a touch to the right — so each
   change reads as a swipe rather than a cut. The slight scale is overscan,
   kept so no dark edge shows while a slide is mid-slide. */
.hero-slides { position: absolute; inset: 0; }
.hero-slide {
  position: absolute; inset: 0; z-index: 0;
  opacity: 0; transform: translateX(5%) scale(1.06);
  transition: opacity 1.3s var(--ease), transform 1.3s var(--ease);
  will-change: opacity, transform;
}
.hero-slide.is-active { opacity: 1; transform: translateX(0) scale(1.06); z-index: 1; }
.hero-slide.is-leaving { opacity: 0; transform: translateX(-5%) scale(1.06); z-index: 0; }

/* ---------- The vibe (video carousel) ---------- */
.vibe-section { background: var(--ink); background-image: var(--gilt-tl), var(--slats); }
/* An arrow in each gutter and exactly four tiles between them; the arrows sit
   in their own columns so they never cover a card. The strip still takes swipe
   and trackpad, and scroll-snaps a set of four into place. */
.vibe-carousel { display: flex; align-items: center; gap: 16px; margin-top: 50px; }
.vibe-track {
  flex: 1 1 auto; min-width: 0;
  display: flex; gap: 18px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding: 12px 2px; margin: -12px 0;
  scrollbar-width: none; -ms-overflow-style: none;
}
.vibe-track::-webkit-scrollbar { display: none; }
.vibe-card {
  position: relative; margin: 0;
  flex: 0 0 calc((100% - 3 * 18px) / 4); aspect-ratio: 9 / 16;
  scroll-snap-align: start;
  border-radius: 16px; overflow: hidden;
  background: var(--ink-2);
  border: 1px solid var(--line);
  cursor: pointer;
  transition: transform 0.6s var(--ease), border-color 0.6s var(--ease), box-shadow 0.6s var(--ease);
}
.vibe-vid {
  width: 100%; height: 100%; object-fit: cover; object-position: center 28%;
  display: block; background: var(--ink-2);
  transform: scale(1.01);
  transition: transform 1.3s var(--ease), filter 0.6s var(--ease);
}
/* a foot of shade so the tiles sit as a set and a lit tile blooms out of it */
.vibe-card::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(12,10,8,0.10), transparent 28%, transparent 60%, rgba(12,10,8,0.55));
  opacity: 1; transition: opacity 0.7s var(--ease);
}
.vibe-glow {
  position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(201,164,92,0);
  transition: box-shadow 0.6s var(--ease);
}
.vibe-card.playing::after { opacity: 0.55; }
.vibe-card:hover { transform: translateY(-6px); border-color: rgba(201,164,92,0.5); }
.vibe-card:hover .vibe-vid { transform: scale(1.08); }
.vibe-card:hover .vibe-glow { box-shadow: inset 0 0 0 1px rgba(201,164,92,0.55), 0 26px 54px -26px rgba(0,0,0,0.85); }
.vibe-card.sound .vibe-glow { box-shadow: inset 0 0 0 2px var(--brass), 0 26px 54px -26px rgba(0,0,0,0.85); }

/* An always-visible sound button, so the tap-for-sound affordance is never
   hidden (the old note only surfaced on hover — invisible on touch). A small
   brass-ringed glass disc, bottom-right, that fills gold once the tile sounds. */
.vibe-mute {
  position: absolute; right: 10px; bottom: 10px; z-index: 2;
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(12, 10, 8, 0.62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid rgba(201, 164, 92, 0.6); color: var(--pearl);
  cursor: pointer; box-shadow: 0 10px 26px -14px rgba(0, 0, 0, 0.9);
  transition: background 0.4s var(--ease), color 0.4s var(--ease),
              border-color 0.4s var(--ease), transform 0.4s var(--ease);
}
.vibe-mute svg { width: 18px; height: 18px; display: block; }
.vibe-mute .ic-on { display: none; }
.vibe-mute:hover { transform: scale(1.08); border-color: var(--brass); }
.vibe-card.sound .vibe-mute { background: var(--brass); color: var(--ink-2); border-color: var(--brass); }
.vibe-card.sound .vibe-mute .ic-off { display: none; }
.vibe-card.sound .vibe-mute .ic-on { display: block; }

/* The two arrows live in the gutters, brass-ringed glass discs that fill gold
   on hover. Both stay on view; the one that can go no further dims rather than
   vanishing, so the strip always reads as having more on each side. */
.vibe-nav {
  flex: 0 0 auto;
  width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(12, 10, 8, 0.58); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid rgba(201, 164, 92, 0.45); color: var(--pearl);
  cursor: pointer; box-shadow: 0 12px 34px -16px rgba(0, 0, 0, 0.9);
  transition: background 0.4s var(--ease), color 0.4s var(--ease),
              border-color 0.4s var(--ease), transform 0.4s var(--ease), opacity 0.4s var(--ease);
}
.vibe-nav svg { width: 22px; height: 22px; }
.vibe-nav:hover {
  background: var(--brass); color: var(--ink-2); border-color: var(--brass);
  transform: scale(1.09);
}
.vibe-nav:disabled { opacity: 0.28; pointer-events: none; }

@media (max-width: 1024px) { .vibe-card { flex-basis: calc((100% - 2 * 18px) / 3); } }
@media (max-width: 768px) {
  .vibe-carousel { gap: 10px; }
  .vibe-card { flex-basis: calc((100% - 18px) / 2); }
  .vibe-nav { width: 44px; height: 44px; }
  .vibe-nav svg { width: 18px; height: 18px; }
  .vibe-mute { width: 34px; height: 34px; right: 8px; bottom: 8px; }
  .vibe-mute svg { width: 16px; height: 16px; }
}
@media (max-width: 520px) { .vibe-card { flex-basis: 82%; } }
.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:
    /* A bed under the words only. The hero photograph has five lit cocktails
       stood across the middle of it, exactly where the title, the tagline and
       the buttons fall; a full-width band dark enough to fix that would put the
       whole picture back in the dark. This pools the shade where the type is
       and lets the outer glasses keep their colour. */
    radial-gradient(48% 42% at 50% 47%, rgba(12, 10, 8, 0.74), rgba(12, 10, 8, 0.34) 62%, transparent 80%),
    linear-gradient(180deg, transparent 20%, rgba(12, 10, 8, 0.3) 42%, rgba(12, 10, 8, 0.3) 64%, transparent 84%),
    radial-gradient(125% 95% at 50% 44%, transparent 0%, rgba(12, 10, 8, 0.3) 74%, rgba(12, 10, 8, 0.76) 100%),
    linear-gradient(180deg, rgba(12, 10, 8, 0.5) 0%, rgba(12, 10, 8, 0.08) 42%, rgba(12, 10, 8, 0.78) 100%);
}
.hero-content { position: relative; z-index: 2; padding: 0 24px; }
/* The headline is the artist's signature, written across the room in the
   script, arriving the way ink dries: soft, then sharp. One orchestrated
   moment, then nothing. The only other place this face exists is the night
   notes, so the hero and the programme speak with the same hand. */
.hero-script {
  font-family: var(--script);
  font-size: clamp(54px, 8.6vw, 118px);
  color: var(--pearl);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: 0.01em;
  max-width: 16ch;
  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); filter: blur(6px); }
  to { opacity: 1; transform: none; filter: none; }
}
@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(241, 232, 218, 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); }
/* minmax(0, 1fr) rather than 1fr: a bare 1fr track has an implicit min of
   auto, so a long dish name set to nowrap forces the track wider than its
   share and the columns spill past the container. Clamping the minimum to 0
   keeps every column to its equal share and lets long names wrap instead. */
.menu-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(38px, 4vw, 64px) clamp(44px, 6vw, 96px); align-items: start; }
@media (min-width: 1500px) { .menu-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.menu-cat { break-inside: avoid; min-width: 0; }
/* 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: 13.5px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.3em; text-indent: 0.3em;
  color: var(--pearl);
  line-height: 1.5;
  margin: 0;
}
/* The note under the category name is chalked, not printed: the one place
   besides the programme where the script speaks. */
.menu-cat-sub {
  font-family: var(--script);
  color: var(--brass);
  font-size: 25px;
  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. */
/* The dish is the sans and the price is the slab: the ticket scheme. Priced
   tickets at a counter set the number in the wood type and the words in the
   plain hand, and that is exactly the hierarchy a carte wants. */
.menu-item { display: flex; align-items: baseline; gap: 10px; padding: 7px 0; }
/* The name may wrap: with align-items:baseline the dots and price stay on the
   first line and a long name flows underneath, the way a printed carte sets
   it. min-width:0 lets the name shrink inside the flex row so it never pushes
   the price off the edge. */
/* Relidux ships one weight, so anything above 400 makes the browser fake a
   bold and the names read heavy. Pin 400 and forbid weight synthesis. */
.menu-item .mi-name { font-family: var(--sans); font-size: 15.5px; font-weight: 400; font-synthesis: none; color: var(--pearl); min-width: 0; overflow-wrap: break-word; }
.menu-item .mi-dots { flex: 1; border-bottom: 1px dotted rgba(176, 167, 149, 0.32); transform: translateY(-5px); }
.menu-item .mi-price { font-family: var(--display); color: var(--brass); font-size: 13.5px; white-space: nowrap; }
.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; }

/* ---------- The carte as mini-cards (the /menu page) ---------- */
/* Each dish is a small card: the photo on the left, the name and note, and the
   price(s) as tags. A dish sold two ways (glass / bottle) carries two tags.
   Items with no photo (the bar carte, add-ons) drop the image column. */
.menu-card {
  display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 18px;
  align-items: center; padding: 15px 0; border-bottom: 1px solid var(--line-soft);
}
.menu-card.no-img { grid-template-columns: minmax(0, 1fr); }
.menu-card:last-child { border-bottom: 0; }
.mc-thumb {
  width: 96px; height: 96px; padding: 0; border: 0; background: none;
  border-radius: 3px; overflow: hidden; position: relative; cursor: zoom-in;
}
.mc-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s var(--ease); }
.mc-thumb:hover img { transform: scale(1.06); }
.mc-thumb::after {
  content: ''; position: absolute; inset: 6px; pointer-events: none;
  border: 1px solid rgba(241, 232, 218, 0.35); transition: inset 0.5s var(--ease);
}
.mc-thumb:hover::after { inset: 9px; }
.mc-body { min-width: 0; }
.mc-name { font-family: var(--sans); font-weight: 500; font-size: 16px; color: var(--pearl); line-height: 1.3; }
.mc-desc { font-size: 13px; color: var(--para); opacity: 0.82; margin: 5px 0 0; line-height: 1.5; }
.mc-prices { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 11px; }
.mc-tag {
  display: inline-flex; align-items: baseline; gap: 8px;
  border: 1px solid var(--line); border-radius: 2px; padding: 6px 12px; background: var(--brass-soft);
}
.mc-tag small { font-family: var(--sans); font-weight: 500; font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--para); }
.mc-tag b { font-family: var(--display); font-weight: 400; font-size: 14px; color: var(--brass); white-space: nowrap; }
.mc-tag .mc-deal { font-style: normal; color: var(--ok); margin-left: 8px; }
.mc-tag.on-deal s { opacity: 0.6; margin-right: 0; }

/* On the printed ivory band the ink and the gold go dark. */
.paper .menu-card { border-bottom-color: var(--rule-on-paper); }
.paper .mc-thumb::after { border-color: rgba(32, 25, 20, 0.3); }
.paper .mc-name { color: var(--ink-on-paper); }
.paper .mc-desc { color: var(--para-on-paper); }
.paper .mc-tag { border-color: var(--rule-on-paper); background: rgba(124, 92, 28, 0.08); }
.paper .mc-tag small { color: var(--para-on-paper); }
.paper .mc-tag b { color: var(--gold-on-paper); }
.paper .mc-tag .mc-deal { color: #4b6b46; }

/* A category can lay its cards two to a row inside its own column (used for the
   long Tapas opener). The head stays on its own line above the pair. The image
   shrinks a little so two compact cards fit the half-width column. */
@media (min-width: 620px) {
  .menu-cat--grid2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 22px;
    align-items: start;
  }
  .menu-cat--grid2 .cat-head { grid-column: 1 / -1; }
  .menu-cat--grid2 .menu-card { grid-template-columns: 78px minmax(0, 1fr); gap: 13px; }
  .menu-cat--grid2 .mc-thumb { width: 78px; height: 78px; }
  /* Keep a rule under the last card so both columns end on an even base line. */
  .menu-cat--grid2 .menu-card:last-child { border-bottom: 1px solid var(--line-soft); }
  .paper .menu-cat--grid2 .menu-card:last-child { border-bottom-color: var(--rule-on-paper); }
}

/* Cards are wider than the old text rows: two columns at most, one on a phone. */
@media (min-width: 560px) { .items-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); display: grid; column-gap: clamp(28px, 4vw, 72px); align-items: start; } }
@media (max-width: 560px) {
  .menu-card { grid-template-columns: 76px minmax(0, 1fr); gap: 14px; }
  .mc-thumb { width: 76px; height: 76px; }
}

/* ---------- The carte drill-down (groups -> categories -> items) ---------- */
/* Breadcrumb */
.carte-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; justify-content: center; margin: 4px 0 34px; }
.carte-nav .crumb {
  font-family: var(--sans); font-size: 11px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--para-on-paper);
  border: 1px solid var(--rule-on-paper); border-radius: 999px; padding: 8px 18px;
  transition: color 0.3s, border-color 0.3s, background 0.3s;
}
a.crumb:hover { color: var(--ink-on-paper); border-color: var(--gold-on-paper); }
.carte-nav .crumb.current { color: var(--paper); background: var(--ink-on-paper); border-color: var(--ink-on-paper); }
.carte-nav .crumb-sep { color: var(--rule-on-paper); font-size: 15px; }

/* The group and category cards: dark image tiles with a gold label, the
   keyline frame the rest of the site uses on its photographs. */
.carte-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }
.carte-grid--groups { grid-template-columns: repeat(2, 1fr); gap: 22px; }
.carte-card {
  position: relative; display: block; overflow: hidden; border-radius: 2px;
  background: var(--ink); aspect-ratio: 3 / 2; cursor: pointer;
  box-shadow: 0 18px 40px rgba(12, 10, 8, 0.18);
}
.carte-grid--groups .carte-card { aspect-ratio: 16 / 9; }
.carte-card .cc-pic { position: absolute; inset: 0; display: block; background: var(--ink-2); }
.carte-card .cc-pic img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.1s var(--ease), filter 0.6s var(--ease); filter: saturate(0.96) brightness(0.82); }
.carte-card .cc-pic-none { background: linear-gradient(140deg, var(--panel), var(--ink)); }
.carte-card::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(12,10,8,0.1) 0%, rgba(12,10,8,0.2) 42%, rgba(12,10,8,0.86) 100%);
}
.carte-card::after {
  content: ''; position: absolute; inset: 12px; z-index: 2; pointer-events: none;
  border: 1px solid rgba(241, 232, 218, 0.26); transition: inset 0.6s var(--ease), border-color 0.6s var(--ease);
}
.carte-card:hover .cc-pic img { transform: scale(1.06); filter: saturate(1.04) brightness(0.9); }
.carte-card:hover::after { inset: 18px; border-color: var(--brass); }
.carte-card .cc-body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 22px 24px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.carte-card .cc-name {
  font-family: var(--display); font-size: clamp(19px, 2vw, 26px); color: var(--pearl);
  line-height: 1.12; text-shadow: 0 2px 16px rgba(0, 0, 0, 0.6);
}
.carte-grid--groups .cc-name { font-size: clamp(24px, 2.6vw, 34px); }
.carte-card .cc-cta {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--sans); font-size: 10.5px; font-weight: 500; letter-spacing: 0.2em; text-indent: 0.2em; text-transform: uppercase;
  color: var(--on-pearl); background: var(--pearl); padding: 9px 18px; border-radius: 999px;
  transition: background 0.35s var(--ease), color 0.35s var(--ease);
}
.carte-card .cc-cta svg { width: 13px; height: 13px; }
.carte-card:hover .cc-cta { background: var(--brass); }
/* The round arrow, top-right, like the reference */
.carte-card .cc-arrow {
  position: absolute; top: 16px; right: 16px; z-index: 3;
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(12, 10, 8, 0.55); border: 1px solid rgba(241, 232, 218, 0.3); color: var(--pearl);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  transition: background 0.35s, color 0.35s, border-color 0.35s;
}
.carte-card .cc-arrow svg { width: 17px; height: 17px; }
.carte-card:hover .cc-arrow { background: var(--brass); color: var(--on-pearl); border-color: var(--brass); }
/* The item count on a category card */
.carte-card .cc-count {
  position: absolute; top: 14px; right: 14px; z-index: 3;
  min-width: 26px; height: 26px; padding: 0 8px; border-radius: 999px;
  display: grid; place-items: center; font-family: var(--display); font-size: 13px; color: var(--on-pearl);
  background: var(--pearl); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

/* The items level: a head, then the item cards in a two-column grid. */
.items-view { animation: fadeUp 0.5s var(--ease); }
.items-head { text-align: center; margin-bottom: 34px; }
.items-head .section-title { font-size: clamp(26px, 3.4vw, 42px); margin: 0 auto; max-width: none; }
.items-head .menu-cat-sub { margin-top: 10px; }
.items-grid > .menu-card { break-inside: avoid; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.carte-grid { animation: fadeUp 0.5s var(--ease); }

/* ---- Full carte (server-rendered /menu): every category stacked under its
   group, with a jump nav. Replaces the old 3-level drill-down so the whole
   menu is in the raw HTML for search engines and AI crawlers. ---- */
.carte-intro { margin: 0 0 30px; animation: none; }
/* the cover card whose group is on screen reads as selected */
.carte-card--group.is-active::after { inset: 14px; border-color: var(--brass); }
.carte-card--group.is-active .cc-cta { background: var(--brass); }
.carte-card--group:not(.is-active) .cc-pic img { filter: saturate(0.7) brightness(0.62); }
.carte-group { margin-top: 64px; }
.carte-group:first-of-type { margin-top: 4px; }
.carte-group-title {
  font-family: var(--display); font-size: clamp(30px, 4.2vw, 52px);
  text-align: center; color: var(--ink-on-paper); margin: 0;
}
.carte-group-title::after {
  content: ''; display: block; width: 54px; height: 1px; margin: 18px auto 0;
  background: var(--gold-on-paper); opacity: 0.55;
}
.carte-group .items-view { animation: none; margin-top: 48px; }
.carte-jump {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 8px; margin: 0 0 8px;
}
.carte-jump-group {
  width: 100%; text-align: center;
  font-family: var(--sans); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold-on-paper); margin: 16px 0 4px;
}
.carte-jump-group:first-child { margin-top: 0; }
.carte-jump-link {
  font-family: var(--sans); font-size: 12.5px; letter-spacing: 0.04em;
  color: var(--ink-on-paper); text-decoration: none;
  padding: 7px 14px; border: 1px solid var(--rule-on-paper); border-radius: 999px;
  transition: background 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease);
}
.carte-jump-link:hover, .carte-jump-link:focus-visible {
  background: var(--ink-on-paper); color: var(--paper); border-color: var(--ink-on-paper);
}
/* clear the fixed nav when jumping to a section */
.carte-group[id], .items-view[id] { scroll-margin-top: 92px; }

@media (max-width: 620px) {
  .carte-grid--groups { grid-template-columns: 1fr; }
  .carte-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .carte-card .cc-body { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .items-view, .carte-grid { animation: none; }
  .carte-card .cc-pic img { transition: none; }
}

/* The dish lightbox. Same framed-plate language as the welcome pop-up. */
.dish-lb {
  position: fixed; inset: 0; z-index: 130;
  display: grid; place-items: center; padding: 24px;
  background: rgba(12, 10, 8, 0.88);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none; transition: opacity 0.3s var(--ease);
}
.dish-lb.open { opacity: 1; pointer-events: auto; }
.dish-lb figure {
  position: relative; margin: 0; width: min(760px, 100%);
  background: var(--ink); border: 1px solid var(--line);
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.6); padding: 14px;
  transform: translateY(16px) scale(0.98); transition: transform 0.4s var(--ease);
}
.dish-lb.open figure { transform: none; }
.dish-lb figure::after {
  content: ''; position: absolute; inset: 8px; pointer-events: none;
  border: 1px solid rgba(201, 164, 92, 0.28);
}
.dish-lb img { position: relative; z-index: 1; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.dish-lb figcaption {
  position: relative; z-index: 1; text-align: center; margin-top: 16px; padding-bottom: 4px;
  font-family: var(--display); font-size: 20px; color: var(--pearl); letter-spacing: 0.01em;
}
.dish-lb-close {
  position: absolute; top: 24px; right: 24px; z-index: 2;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--ink); border: 1px solid var(--line); color: var(--pearl);
  font-size: 22px; line-height: 1; display: grid; place-items: center; cursor: pointer;
  transition: color 0.3s, border-color 0.3s;
}
.dish-lb-close:hover { color: var(--brass); border-color: var(--brass); }
@media (prefers-reduced-motion: reduce) {
  .dish-lb, .dish-lb figure { transition: none; }
  .dish-lb figure { transform: none; }
}
.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(12, 10, 8, 0.96) 0%, rgba(36, 28, 21, 0.9) 52%, rgba(12, 10, 8, 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(28px, 3.2vw, 44px); }
.formule-copy > p { color: var(--para); margin-bottom: 26px; max-width: 44ch; }
.formule-time {
  font-family: var(--script); font-size: 34px;
  color: var(--brass); margin: 18px 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(46, 107, 112, 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(241, 232, 218, 0.1);
}
.fm-row { display: flex; align-items: baseline; gap: 12px; padding: 10px 0; }
.fm-name { font-family: var(--sans); font-weight: 400; font-synthesis: none; font-size: 16px; color: var(--pearl); }
.fm-dots { flex: 1; border-bottom: 1px dotted rgba(176, 167, 149, 0.3); transform: translateY(-4px); }
.fm-price { font-family: var(--display); font-size: 14px; 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. */
/* The week in one line: seven columns between two gold rules, each a night —
   the day in the marquee face, "live band" in script, the hours below. Every
   night is a band; the genre is never fixed, so the backdrop cross-fades
   through the styles (jazz, oriental, gnaoua…) five seconds each, under a dark
   veil that keeps the type readable. On a narrow screen the strip scrolls. */
.programme-section { position: relative; overflow: hidden; background: var(--ink-2); }
.prog-bg { position: absolute; inset: 0; z-index: 0; }
.prog-bg-slide {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  opacity: 0; transform: scale(1.06);
  transition: opacity 1.6s var(--ease), transform 5.6s linear;
}
.prog-bg-slide.is-active { opacity: 1; transform: scale(1.12); }
/* the veil: dark enough that the kicker, title and paragraph hold, while the
   film of the room still reads behind them */
.prog-bg::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(12,10,8,0.86), rgba(12,10,8,0.66) 42%, rgba(12,10,8,0.82)),
    radial-gradient(120% 90% at 50% 40%, transparent 30%, rgba(12,10,8,0.5) 100%);
}
.programme-section > .container { position: relative; z-index: 1; }
/* Seven round medallions floating over the backdrop. Each is a glass disc with
   a gold hairline; hovering fills it with gold and lifts it, tonight's wears a
   petrol wash. The row centres on desktop and scrolls on a phone. */
.programme-grid {
  display: flex; justify-content: center; align-items: center;
  gap: clamp(10px, 1.5vw, 22px);
  overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
  padding: 8px 2px;
}
.programme-grid::-webkit-scrollbar { display: none; }
.prog-day {
  flex: 0 0 auto;
  width: clamp(126px, 13.5vw, 158px); aspect-ratio: 1 / 1;
  border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
  text-align: center; padding: 12px;
  background: rgba(12, 10, 8, 0.52); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  border: 1px solid rgba(201, 164, 92, 0.38);
  transition: transform 0.5s var(--ease), background 0.5s var(--ease),
              border-color 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.prog-day:hover {
  transform: translateY(-8px) scale(1.05);
  background: linear-gradient(150deg, #e4bd6e, var(--brass) 45%, #9c7a2d);
  border-color: var(--brass);
  box-shadow: 0 26px 52px -22px rgba(0, 0, 0, 0.85);
}
.prog-day.today {
  background: linear-gradient(150deg, rgba(46, 107, 112, 0.6), rgba(46, 107, 112, 0.28));
  border-color: rgba(46, 107, 112, 0.85);
}
.prog-name {
  font-family: var(--sans); font-size: 12.5px; letter-spacing: 0.18em; text-indent: 0.18em;
  text-transform: uppercase; color: var(--pearl);
}
.prog-note {
  font-family: var(--script); font-size: 22px; line-height: 1; color: var(--brass);
}
.prog-hours {
  font-family: var(--sans); font-size: 10.5px; letter-spacing: 0.08em;
  color: var(--para); opacity: 0.72;
}
/* on the lit disc the type flips to the dark of the room */
.prog-day:hover .prog-name,
.prog-day:hover .prog-note,
.prog-day:hover .prog-hours { color: var(--ink-2); opacity: 1; }
.prog-day.today .prog-name { color: var(--pearl); }
.prog-day.shut .prog-hours { color: var(--err); opacity: 0.9; }
@media (max-width: 680px) {
  .programme-grid { justify-content: flex-start; }
  .prog-day { width: 120px; }
  .prog-note { font-size: 19px; }
}

/* ---------- 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(12, 10, 8, 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(241, 232, 218, 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 ---------- */
/* ---------- FAQ ---------- */
.faq-section { background: var(--ink-2); }
.faq-list { max-width: 820px; margin: 48px auto 0; border-top: 1px solid var(--line-soft); }
.faq-item { border-bottom: 1px solid var(--line-soft); }
.faq-item summary {
  list-style: none; cursor: pointer; position: relative;
  padding: 22px 44px 22px 0;
  font-family: var(--sans); font-size: 16px; letter-spacing: 0.02em; color: var(--pearl);
  transition: color 0.4s var(--ease);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+'; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  font-family: var(--sans); font-size: 22px; line-height: 1; color: var(--brass);
}
.faq-item[open] summary::after { content: '\2212'; }
.faq-item summary:hover { color: var(--brass); }
.faq-a { padding: 0 44px 24px 0; }
.faq-a p { font-family: var(--sans); font-size: 14.5px; line-height: 1.65; color: var(--para); margin: 0; }

/* ---------- Guide / journal ---------- */
.guide-section { background: var(--ink-2); padding-top: 24px; }
.guide-article { max-width: 760px; margin: 0 auto; padding: 108px 0 20px; }
.guide-article h1 { font-family: var(--display); font-size: clamp(30px, 5vw, 50px); line-height: 1.08; color: var(--pearl); margin: 12px 0 20px; }
.guide-meta { font-family: var(--sans); font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brass); }
.guide-meta a { color: var(--brass); }
.guide-lead { font-family: var(--sans); font-size: 18px; line-height: 1.7; color: var(--pearl); opacity: 0.92; margin: 0 0 8px; }
.guide-article h2 { font-family: var(--display); font-size: clamp(21px, 3vw, 28px); color: var(--pearl); margin: 36px 0 10px; }
.guide-article p { font-family: var(--sans); font-size: 16px; line-height: 1.75; color: var(--para); margin: 0 0 15px; }
.guide-article a:not(.btn) { color: var(--brass); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.guide-article a:not(.btn):hover { color: #e4bd6e; }
.guide-related { border-top: 1px solid var(--line-soft); margin-top: 36px; padding-top: 22px; }
.guide-related ul { list-style: none; padding: 0; margin: 10px 0 0; font-family: var(--sans); line-height: 2; }
.guide-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 22px; margin-top: 48px; }
.guide-card { display: block; border: 1px solid var(--line); border-radius: 14px; padding: 26px; background: rgba(12, 10, 8, 0.4); transition: border-color 0.4s var(--ease), transform 0.4s var(--ease); }
.guide-card:hover { border-color: rgba(201, 164, 92, 0.5); transform: translateY(-4px); }
.guide-card h3 { font-family: var(--display); font-size: 21px; color: var(--pearl); margin: 0 0 8px; line-height: 1.2; }
.guide-card p { font-family: var(--sans); font-size: 14px; color: var(--para); line-height: 1.6; margin: 0; }
.guide-card-cta { display: inline-block; margin-top: 14px; font-family: var(--sans); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brass); }

.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(241, 232, 218, 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; }
}

/* ---------- Welcome pop-up ---------- */
/* The banner's landscape image, shown over the home page on load. The card is
   the same framed-plate language as the rest of the site: a hairline keyline
   set in from the edge, the image, and one banderole-cut button under it. */
.welcome-pop {
  position: fixed; inset: 0; z-index: 130;
  display: grid; place-items: center; padding: 24px;
  background: rgba(12, 10, 8, 0.86);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s var(--ease);
}
.welcome-pop.open { opacity: 1; pointer-events: auto; }
.welcome-pop-card {
  position: relative;
  width: min(760px, 100%);
  background: var(--ink);
  border: 1px solid var(--line);
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.6);
  padding: 14px 14px 26px;
  transform: translateY(16px) scale(0.98);
  transition: transform 0.4s var(--ease);
}
.welcome-pop.open .welcome-pop-card { transform: none; }
.welcome-pop-card::after {
  content: ''; position: absolute; inset: 8px; pointer-events: none;
  border: 1px solid rgba(201, 164, 92, 0.28);
}
.welcome-pop-img {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block;
  position: relative; z-index: 1;
}
.welcome-pop-cta { position: relative; z-index: 1; display: block; width: max-content; margin: 22px auto 4px; }
.welcome-pop-close {
  position: absolute; top: -14px; right: -14px; z-index: 2;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--ink); border: 1px solid var(--line); color: var(--pearl);
  font-size: 22px; line-height: 1; display: grid; place-items: center;
  transition: color 0.3s, border-color 0.3s;
}
.welcome-pop-close:hover { color: var(--brass); border-color: var(--brass); }
@media (max-width: 560px) {
  .welcome-pop-close { top: -10px; right: -10px; width: 36px; height: 36px; font-size: 20px; }
  .welcome-pop-card { padding: 10px 10px 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .welcome-pop, .welcome-pop-card { transition: none; }
  .welcome-pop-card { transform: none; }
}

.lightbox {
  position: fixed; inset: 0; z-index: 90; background: rgba(12, 10, 8, 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: 28px; line-height: 0.95; color: var(--brass); }
.hours-list .dots { flex: 1; border-bottom: 1px dotted rgba(176, 167, 149, 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(--script); font-size: 23px; }
.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(12, 10, 8, 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(--scene); 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(--scene); font-weight: 500; }

/* ---------- Reservation ---------- */
/* The photograph was under a 90% scrim, which is a black rectangle with a
   picture somewhere behind it. It reads at 62 and the band stops feeling like
   a wall. */
.reserve-section {
  background:
    linear-gradient(rgba(12, 10, 8, .62), rgba(12, 10, 8, .74)),
    url('../images/space-restaurant.jpg') center/cover fixed;
}
/* Printed, like the carte and the hours. A dozen fields on a near-black card
   is the least comfortable thing on the site to fill in, and the one place a
   guest cannot afford to lose their place. */
.reserve-panel {
  position: relative;
  max-width: 780px; margin: 0 auto;
  background-color: var(--paper);
  background-image:
    radial-gradient(100% 68% at 50% -8%, rgba(255, 255, 255, .5), transparent 68%),
    url('../images/paper.jpg');
  background-size: auto, cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--para-on-paper);
  border: 1px solid rgba(32, 25, 20, .18);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55);
  padding: clamp(36px, 5vw, 68px);
}
.reserve-panel::after {
  content: ''; position: absolute; inset: 10px; pointer-events: none;
  border: 1px solid rgba(32, 25, 20, .1);
}
.reserve-panel .kicker { color: var(--gold-on-paper); }
.reserve-panel .kicker::before, .reserve-panel .kicker::after { background: var(--rule-on-paper); }
.reserve-panel .section-title { color: var(--ink-on-paper); }
.reserve-panel .section-sub, .reserve-panel .form-note { color: var(--para-on-paper); }
.reserve-panel .prefill-note { color: var(--gold-on-paper); }
.reserve-panel .form-field label { color: var(--gold-on-paper); }
.reserve-panel .field-note { color: var(--para-on-paper); opacity: .85; }
.reserve-panel .form-field input,
.reserve-panel .form-field select,
.reserve-panel .timepick-btn {
  background-color: rgba(255, 255, 255, .72);
  border-color: rgba(32, 25, 20, .22);
  color: var(--ink-on-paper);
}
.reserve-panel .form-field input::placeholder { color: rgba(90, 83, 72, .55); }
.reserve-panel .form-field input:focus,
.reserve-panel .form-field select:focus,
.reserve-panel .timepick-btn:hover,
.reserve-panel .timepick-btn.open { border-color: var(--gold-on-paper); }
.reserve-panel .form-field input[type='date'] { color-scheme: light; }
.reserve-panel .form-field select {
  background-image: linear-gradient(45deg, transparent 50%, var(--gold-on-paper) 50%),
                    linear-gradient(135deg, var(--gold-on-paper) 50%, transparent 50%);
  background-position: calc(100% - 20px) 55%, calc(100% - 15px) 55%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}
.reserve-panel .form-field select option { background: var(--paper); color: var(--ink-on-paper); }
.reserve-panel .timepick-btn .tp-caret { border-top-color: var(--gold-on-paper); }
.reserve-panel .timepick-btn svg { fill: var(--gold-on-paper); }
.reserve-panel .timepick-btn.chosen { color: var(--ink-on-paper); }
.reserve-panel .timepick-panel {
  background: var(--paper); border-color: rgba(32, 25, 20, .2);
  box-shadow: 0 20px 46px rgba(0, 0, 0, .3);
}
.reserve-panel .timepick-slot { background: rgba(32, 25, 20, .05); color: var(--para-on-paper); }
.reserve-panel .timepick-slot:hover { background: rgba(124, 92, 28, .12); color: var(--ink-on-paper); border-color: var(--gold-on-paper); }
.reserve-panel .timepick-slot.on { background: var(--ink-on-paper); color: var(--paper); border-color: var(--ink-on-paper); }
.reserve-panel .btn { border-color: rgba(32, 25, 20, .45); color: var(--ink-on-paper); background: transparent; }
.reserve-panel .btn::before { border-top-color: var(--gold-on-paper); border-left-color: var(--gold-on-paper); }
.reserve-panel .btn::after { border-bottom-color: var(--gold-on-paper); border-right-color: var(--gold-on-paper); }
.reserve-panel .btn:hover { background: var(--ink-on-paper); border-color: var(--ink-on-paper); color: var(--paper); }
.reserve-panel .btn.solid { background: var(--ink-on-paper); border-color: var(--ink-on-paper); color: var(--paper); }
.reserve-panel .btn.solid:hover { background: var(--gold-on-paper); border-color: var(--gold-on-paper); color: #fff; }
.reserve-panel .form-msg.err { color: var(--wine); }
.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(12, 10, 8, 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(176, 167, 149, 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(176, 167, 149, 0.6); letter-spacing: 0.02em; }
.prefill-note { color: var(--brass); font-size: 13px; margin-top: 12px; }

/* ---------- Footer ---------- */
footer {
  background:
    linear-gradient(180deg, rgba(12, 10, 8, 0.55), rgba(12, 10, 8, 0.68) 55%, rgba(12, 10, 8, 0.9)),
    url('/images/gal-16.jpg') center / cover no-repeat,
    var(--ink-2);
  border-top: 1px solid var(--line-soft); padding: 76px 0 34px;
}
/* the photo shows through, so the type carries its own shade to stay legible */
footer .footer-grid h4, footer .footer-grid p, footer .footer-grid a,
footer .footer-grid li, footer .footer-bottom { text-shadow: 0 1px 12px rgba(0, 0, 0, 0.9); }
.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: 13px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.22em; text-indent: 0.22em;
  margin-bottom: 20px; color: var(--brass);
}
.footer-grid p, .footer-grid a, .footer-grid li { color: var(--para); font-size: 15.5px; line-height: 1.7; list-style: none; }
.footer-grid a:hover { color: var(--brass); }
.footer-grid ul { display: grid; gap: 12px; }
.footer-logo { height: 62px; width: auto; margin-bottom: 20px; }
.socials { display: flex; gap: 14px; margin-top: 26px; }
/* The mark is the button. No frame, no tint, no filter: these are the official
   logos and they are recognised by their colour, so the only thing hover does
   is lift them. */
.socials a {
  width: 46px; height: 46px; display: block; border-radius: 10px;
  /* No overflow clip: each logo already carries its own corner radius, and
     clipping to ours shaves whichever one is rounder than 10px. The radius is
     kept so the hover shadow follows the shape. */
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.socials a img { width: 100%; height: 100%; object-fit: contain; display: block; }
.socials a:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0, 0, 0, .4); }
.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.9; font-size: 13.5px; letter-spacing: 0.05em;
}
.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(12, 10, 8, 0.76) 0%, rgba(12, 10, 8, 0.54) 45%, rgba(12, 10, 8, 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(30px, 4.4vw, 56px); position: relative; z-index: 2; letter-spacing: 0.04em; }
.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 ---------- */
/* The banner that answers a booking. It comes down from the top of the window
   rather than sitting in the page, because the confirmation matters more than
   the form it came from, and the form is usually scrolled past by then. It
   takes itself away after five seconds. */
.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;
  border-radius: 2px;
  background: var(--paper); color: var(--ink-on-paper);
  border: 1px solid rgba(32, 25, 20, .18);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .5);
  font-size: 14.5px; font-weight: 400; line-height: 1.5;
  transition: transform .55s var(--ease), opacity .4s var(--ease);
  opacity: 0;
}
.toast.show { transform: translate(-50%, 0); opacity: 1; }
/* The mark on the left says which kind of news this is before the words do */
.toast::before {
  content: ''; flex: none; width: 4px; align-self: stretch; border-radius: 2px;
  background: var(--ok);
}
.toast.err::before { background: var(--wine); }
.toast .toast-close {
  margin-left: auto; flex: none; background: none; border: 0; cursor: pointer;
  font-size: 18px; line-height: 1; color: var(--para-on-paper); padding: 0 2px;
}
.toast .toast-close:hover { color: var(--ink-on-paper); }
@media (max-width: 560px) { .toast { font-size: 13.5px; padding: 14px 16px; } }

/* ---------- Account ---------- */
.nav-auth {
  border: 1px solid var(--line); border-radius: 1px;
  padding: 10px 16px !important; letter-spacing: 0.08em; text-indent: 0.08em;
  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(12, 10, 8, .70), rgba(12, 10, 8, .84) 55%, rgba(12, 10, 8, .95));
}
.page-account .nav {
  background: rgba(12, 10, 8, 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(12, 10, 8, .6); }

.auth-wrap { display: flex; justify-content: center; width: 100%; }
.auth-card {
  position: relative;
  width: min(580px, 100%); background: rgba(29, 23, 18, 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(241, 232, 218, 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(12, 10, 8, 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(12, 10, 8, 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(12, 10, 8, 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(29, 23, 18, .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(--scene), #16383c 62%, var(--panel)); border-color: rgba(201, 164, 92, 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(29, 23, 18, .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(201, 164, 92, 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(12, 10, 8, .93), rgba(36, 28, 21, .86) 45%, rgba(12, 10, 8, .95));
}
.contact-band > .container { position: relative; }
.contact-inner { text-align: center; max-width: 1080px; margin: 0 auto; }
.contact-inner .section-title { font-size: clamp(30px, 4vw, 48px); }
.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(29, 23, 18, 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(36, 28, 21, 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(29, 23, 18, .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(29, 23, 18, .9); border: 1px solid rgba(201, 164, 92, .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(12, 10, 8, 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(241, 232, 218, 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(241, 232, 218, 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(--brass);
  border-bottom: 1px solid rgba(0, 0, 0, 0.28);
  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;
  /* Dark ink on the gold, so it stays readable */
  color: var(--on-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: #000; }
@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(--scene); 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. */
/* The nav collapses to the burger below 1400, not 1240: the French labels in
   the wide Relidux face need more room than the English ones, and between
   1240 and ~1500 the horizontal bar used to overflow and crush the logo to
   zero width. Below this the whole lot moves into the burger panel, so the
   logo is always safe. */
@media (max-width: 1400px) {
  .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; }
  section.paper { background-attachment: scroll, scroll; }
  /* iOS Safari freezes and mis-positions a fixed header's backdrop-filter layer
     during the dynamic-toolbar resize on scroll, leaving a sharp ghost of the
     content behind it up in the status-bar area. Drop the blur on small screens;
     a near-solid bar reads the same and the glitch goes away. */
  .nav.scrolled { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(12, 10, 8, 0.97); }
}
@media (min-width: 1401px) { .nav-links .mobile-only { display: none; } }
@media (max-width: 560px) {
  .spaces-grid { grid-template-columns: 1fr; }
  .space-card { aspect-ratio: 16 / 11; }
  /* keep the two hero buttons compact, not full-width bars, on phones */
  .hero-actions { gap: 10px; margin-top: 36px; }
  .hero-actions .btn { width: auto; padding: 12px 20px; font-size: 10.5px; letter-spacing: 0.12em; text-indent: 0.12em; }
  .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; }
}

/* ---------- The reserve badge ---------- */
/* Booking within reach at any depth of the page. The wording turns; the
   monogram inside it does not, which is the whole trick.
   The disc behind it is not decoration: this page runs dark bands against
   paper ones, and the badge crosses both. Without it the brass wording
   disappears exactly over the reservation section it points at. */
.reserve-badge {
  position: fixed; right: 34px; bottom: 34px; z-index: 55;
  width: 112px; height: 112px; display: grid; place-items: center;
}
.reserve-badge::before {
  content: ''; position: absolute; inset: 6px; border-radius: 50%;
  background: rgba(12, 10, 8, 0.72); border: 1px solid var(--line-soft);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.reserve-badge svg { position: absolute; inset: 0; animation: spin 14s linear infinite; }
.reserve-badge svg text {
  fill: var(--brass); font-family: var(--sans); font-weight: 500;
  font-size: 8.6px; letter-spacing: 0.3em; text-transform: uppercase;
}
.reserve-badge .badge-center { position: relative; display: grid; place-items: center; transition: transform 0.5s var(--ease); }
.reserve-badge .badge-center img { width: 54px; height: auto; }
.reserve-badge:hover .badge-center { transform: scale(1.09); }
@keyframes spin { to { transform: rotate(360deg); } }

/* A turning object in the corner is the first thing to go when someone has
   asked for less movement. The badge stays; only the rotation stops. */
@media (prefers-reduced-motion: reduce) {
  .reserve-badge svg { animation: none; }
}

/* On a phone it would sit on the content rather than float over it, and the
   bar already carries the booking button. This has to live below the rule that
   makes the badge a grid, not up with the other 1024 rules, or it loses to it. */
@media (max-width: 1024px) {
  .reserve-badge { display: none; }
}

/* ---------- Booking switched off ---------- */
/* The owner has taken online booking off in the panel and is handling tables
   himself. Everything that offers a booking comes off the page: the form, the
   button in the bar, the one in the hero, the one in the contact band and the
   link in the footer. The class only ever gets added, never removed, so a page
   that cannot reach the API keeps its buttons rather than losing them. */
.bookings-off .reserve-section,
.bookings-off .nav-cta,
.bookings-off .reserve-badge,
.bookings-off a[href$="#reserve"],
.bookings-off li:has(> a[href$="#reserve"]) { display: none !important; }

/* Guest accounts: sign in / create an account are OFF by default, so the nav
   buttons stay hidden until the owner enables accounts in the panel (which adds
   .accounts-on). Default-hidden means they never flash in and out. */
li:has(> a.nav-auth) { display: none; }
.accounts-on li:has(> a.nav-auth) { display: block; }
.nav-auth-m { display: none !important; }
@media (max-width: 1400px) {
  .accounts-on .nav-links li.nav-auth-m { display: block !important; }
}

/* The contact band keeps its second button, which becomes the only one */
.bookings-off .contact-actions .btn.ghost { margin: 0 auto; }

/* ---------- The carte's own language ---------- */
/* Separate from the site's switch in the bar. A guest reads the dishes in
   Spanish while the rest of the page stays in French, which is what actually
   happens at a table in Casablanca. Sits under the Kitchen / Bar tabs, quieter than
   them, because it is a preference rather than a place to go. */
.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: 12px; font-weight: 500;
  letter-spacing: 0.14em; 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(--line-soft); }
.carte-lang button:hover { opacity: 1; color: var(--pearl); }
.carte-lang button.active { opacity: 1; color: var(--brass); border-bottom-color: var(--brass); }
/* On the printed bands the ink is the wine-black, not the pearl */
.paper .carte-lang button { color: var(--para-on-paper); }
.paper .carte-lang button + button { border-left-color: var(--rule-on-paper); }
.paper .carte-lang button:hover { color: var(--ink-on-paper); }
.paper .carte-lang button.active { color: var(--gold-on-paper); border-bottom-color: var(--gold-on-paper); }
@media (max-width: 560px) {
  .carte-lang { margin: -18px 0 32px; }
  .carte-lang button { padding: 8px 11px; font-size: 11px; letter-spacing: .1em; }
}

/* ---------- Booking taken on WhatsApp ---------- */
/* The same form, but the request leaves as a message. The button carries
   WhatsApp green rather than the house ink, because a guest recognises it
   before he reads it, and it inverts on hover the way every other button on
   the paper band does. Scoped under .reserve-panel because
   `.reserve-panel .btn.solid` sits on the same element and would otherwise
   win on specificity. */
.reserve-panel .btn.wa-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  background: #1fa855;
  border-color: #1fa855;
  color: #ffffff;
  text-decoration: none;
  text-indent: 0;
}

.reserve-panel .btn.wa-btn::before { border-top-color: #1a8f47; border-left-color: #1a8f47; }
.reserve-panel .btn.wa-btn::after { border-bottom-color: #1a8f47; border-right-color: #1a8f47; }

.reserve-panel .btn.wa-btn:hover,
.reserve-panel .btn.wa-btn:focus-visible { background: #1a8f47; border-color: #1a8f47; color: #ffffff; }

.reserve-panel .btn.wa-btn svg {
  width: 1.2em;
  height: 1.2em;
  fill: currentColor;
  flex: none;
  transition: fill 0.45s var(--ease);
}

/* Left clickable on purpose: the click handler names the missing field, which
   is more use than a button that cannot be pressed and does not say why. */
.reserve-panel .btn.wa-btn.incomplete { opacity: .5; }