/* 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. */

/* Relidux, self-hosted: the house's display sans. dafont, FSLA licence —
   a commercial licence is required for a commercial site. */
@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: '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;
  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 */
.nav.menu-open, .nav.scrolled.menu-open { backdrop-filter: none; -webkit-backdrop-filter: none; background: transparent; box-shadow: none; }
.nav .container { width: min(1580px, 94vw); }
.nav-inner { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 26px; }
.nav-logo { justify-self: start; grid-column: 1; grid-row: 1; display: flex; align-items: center; }
/* The mark is wide, not square, so the height is fixed and it never shrinks:
   a crowded bar would otherwise collapse the column and the logo disappears.
   Under about 70px the hairline "RESTAURANT & LOUNGE" line stops resolving.
   The shadow is what holds it over the hero photograph, since there is no bar
   behind it until the page scrolls. */
.nav-logo img {
  height: 74px; width: auto; flex: none;
  filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.75));
  transition: height 0.4s var(--ease);
}
.nav.scrolled .nav-logo img { height: 56px; filter: none; }
.nav-links { display: flex; gap: 26px; align-items: center; list-style: none; grid-column: 2; grid-row: 1; justify-content: center; }
.nav-right { display: flex; gap: 16px; align-items: center; justify-content: flex-end; grid-column: 3; grid-row: 1; list-style: none; }
.nav-links a, .nav-right a {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  text-indent: 0.15em;
  color: var(--pearl);
  opacity: 0.92;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55);
  transition: opacity 0.35s, color 0.35s;
  position: relative;
  padding: 8px 0;
  display: inline-block;
}
.nav.scrolled .nav-links a, .nav.scrolled .nav-right a { text-shadow: none; }
/* The 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; }
.nav-links > li > a, .nav-right > li > a { white-space: nowrap; }
.nav-cta { border: 1px solid var(--line); padding: 10px 22px !important; border-radius: 1px; }
.nav-cta:hover { background: var(--pearl); border-color: var(--pearl); color: var(--on-pearl) !important; }
.nav-cta::after { display: none; }

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

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

/* ---------- Hero ---------- */
.hero {
  height: 100svh; min-height: 660px;
  position: relative; display: grid; place-items: center;
  text-align: center; overflow: hidden; padding: 0;
}
.hero-bg { position: absolute; inset: 0; background: var(--ink-2); }
.hero-bg video, .hero-bg img { width: 100%; height: 100%; object-fit: cover; }
.hero-bg img.kb { animation: drift 30s var(--ease) infinite alternate; }
@keyframes drift { from { transform: scale(1.02) translateY(0); } to { transform: scale(1.11) translateY(-1.5%); } }
/* Three layers, each doing a different job: a band of shade across the middle
   so the title and the two small lines under it hold, a vignette to keep the
   eye centred, and a foot dark enough for the section below to arrive out of.
   Held deliberately light. The photograph behind is the warm end of the bar and
   it is the whole point of the hero; the buttons carry their own contrast now,
   and the title its own shadow, so the veil does not have to do their work. */
.hero-bg::after {
  content: '';
  position: absolute; inset: 0;
  background:
    /* 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); }
.menu-cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(38px, 4vw, 64px) clamp(44px, 6vw, 96px); align-items: start; }
@media (min-width: 1500px) { .menu-cols { grid-template-columns: repeat(3, 1fr); } }
.menu-cat { break-inside: avoid; }
/* The carte's own headings, set the way the house sets them on paper: the
   name centred over its column in letterspaced caps, the note under it in the
   Didone italic, and one rule closing the block. The rule goes under the whole
   head, not off the side of the words: a line running out of the last letter
   pulls the eye away from the column it is supposed to open. */
.cat-head {
  text-align: center;
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.menu-cat h3 {
  font-family: var(--display);
  font-size: 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; }
.menu-item .mi-name { font-family: var(--sans); font-size: 15.5px; font-weight: 500; color: var(--pearl); white-space: nowrap; }
.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; }
.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: 500; 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. */
.programme-section { background: var(--ink-2); }
.programme-grid {
  display: grid; grid-template-columns: repeat(7, 1fr);
  border: 1px solid var(--line-soft); border-right: 0;
}
.prog-day {
  position: relative;
  border-right: 1px solid var(--line-soft);
  padding: 30px 18px 34px;
  text-align: center;
  transition: background 0.5s var(--ease);
}
.prog-day:hover { background: rgba(201, 164, 92, 0.06); }
.prog-day.today { background: rgba(46, 107, 112, 0.2); }
.prog-day.today::before {
  content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--brass);
}
.prog-name {
  display: block; font-family: var(--sans); font-weight: 500; font-size: 11.5px;
  text-transform: uppercase; letter-spacing: 0.18em; text-indent: 0.18em;
  color: var(--pearl);
}
.prog-hours { display: block; font-size: 12.5px; color: var(--para); opacity: 0.65; margin-top: 8px; letter-spacing: 0.06em; }
.prog-note {
  display: block; font-family: var(--script); font-size: 34px; line-height: 1.05;
  color: var(--brass); margin-top: 14px; min-height: 40px;
}
.prog-note:empty::before { content: '·'; opacity: 0.3; }
.prog-day.shut .prog-hours { color: var(--err); opacity: 0.8; }
@media (max-width: 1100px) { .programme-grid { grid-template-columns: repeat(4, 1fr); border-bottom: 0; } .prog-day { border-bottom: 1px solid var(--line-soft); } }
@media (max-width: 620px) { .programme-grid { grid-template-columns: repeat(2, 1fr); } .prog-note { font-size: 29px; } }

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

.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: var(--ink-2); border-top: 1px solid var(--line-soft); padding: 76px 0 34px; }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 46px; margin-bottom: 54px; }
.footer-grid h4 {
  font-family: var(--sans); font-size: 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 20px !important; letter-spacing: 0.2em; text-indent: 0.2em;
  transition: background .35s, color .35s, border-color .35s;
}
.nav-auth::after { display: none; }
.nav-auth:hover { background: var(--pearl); border-color: var(--pearl); color: var(--on-pearl) !important; }
.nav-auth.signed-in { border-color: var(--brass); color: var(--brass) !important; }
.nav-auth.signed-in:hover { background: var(--brass); border-color: var(--brass); color: var(--on-pearl) !important; }

.page-account { background: var(--ink-2); }
.page-account::before {
  content: ''; position: fixed; inset: 0; z-index: -2;
  background: url('/images/account-bg.jpg') center/cover no-repeat;
}
.page-account::after {
  content: ''; position: fixed; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(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(--scene);
  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
  overflow: hidden; padding: 9px 0;
}
.promo-track {
  display: flex; width: max-content;
  animation-name: promo-scroll; animation-timing-function: linear; animation-iteration-count: infinite;
  will-change: transform;
}
.promo-banner:hover .promo-track { animation-play-state: paused; }
.promo-banner-text {
  flex: none; white-space: nowrap; padding-right: 5rem;
  color: var(--pearl); font-weight: 400;
  font-family: var(--sans); font-weight: 500; font-size: 13.5px; letter-spacing: 0.14em; text-decoration: none;
  text-transform: uppercase;
}
a.promo-banner-text:hover { color: #fff; }
@keyframes promo-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .promo-track { animation: none; } }
@media (max-width: 860px) { .promo-banner { font-size: 13px; padding: 8px 14px; } }

.promo-notice {
  display: block; margin: 0 auto 28px; max-width: 660px;
  background: var(--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. */
@media (max-width: 1240px) {
  .nav-logo img { height: 50px; }
  .nav.scrolled .nav-logo img { height: 42px; }
  .nav-links {
    position: fixed; inset: 0; height: 100svh;
    background: var(--ink-2);
    flex-direction: column; justify-content: center; align-items: center; gap: 24px;
    /* clip-path rather than translateX: a translated full-screen panel widens
       the layout viewport and lets the page pan sideways on phones */
    clip-path: inset(0 0 0 100%);
    visibility: hidden;
    transition: clip-path 0.55s var(--ease), visibility 0s 0.55s;
    grid-column: auto; grid-row: auto; z-index: 65; list-style: none;
  }
  .nav-links.open { clip-path: inset(0); visibility: visible; transition: clip-path 0.55s var(--ease); }
  .nav-links a { font-size: 18px; letter-spacing: 0.3em; text-indent: 0.3em; }
  .nav-links .nav-cta { border: 1px solid var(--brass); padding: 14px 30px !important; }
  .nav-links li { width: 100%; text-align: center; opacity: 0; transform: translateY(14px); }
  .nav-links .lang-switch { display: inline-flex; }
  .nav-links.open li { animation: navItemIn 0.55s var(--ease) forwards; }
  .nav-links.open li:nth-child(1) { animation-delay: 0.08s; }
  .nav-links.open li:nth-child(2) { animation-delay: 0.14s; }
  .nav-links.open li:nth-child(3) { animation-delay: 0.2s; }
  .nav-links.open li:nth-child(4) { animation-delay: 0.26s; }
  .nav-links.open li:nth-child(5) { animation-delay: 0.32s; }
  .nav-links.open li:nth-child(6) { animation-delay: 0.38s; }
  .nav-links.open li:nth-child(7) { animation-delay: 0.44s; }
  .nav-links.open li:nth-child(8) { animation-delay: 0.5s; }
  .nav-right { display: none; }
  .nav-links .mobile-only { display: block; }
  .burger { display: block; }
  .nav-simple .nav-links {
    position: static; height: auto; background: none;
    flex-direction: row; clip-path: none; visibility: visible; gap: 18px; z-index: auto;
  }
  .nav-simple .nav-links li { opacity: 1; transform: none; }
  .nav-simple .nav-links a { font-size: 11px; letter-spacing: 0.18em; text-indent: 0.18em; }
}
@media (max-width: 900px) {
  .about-grid, .info-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  #map { min-height: 340px; }
  .footer-grid { grid-template-columns: 1fr; gap: 34px; }
  /* iOS ignores background-attachment: fixed; keep these bands readable */
  #menu.menu-section, .reserve-section, .contact-band, body { background-attachment: scroll; }
  section.paper { background-attachment: scroll, scroll; }
}
@media (min-width: 901px) { .nav-links .mobile-only { display: none; } }
@media (max-width: 560px) {
  .spaces-grid { grid-template-columns: 1fr; }
  .space-card { aspect-ratio: 16 / 11; }
  .hero-actions .btn { width: 100%; text-align: center; }
  .hero-tag { letter-spacing: 0.34em; text-indent: 0.34em; }
  .menu-item { flex-wrap: wrap; }
  .menu-item .mi-name { white-space: normal; max-width: 75%; }
  .menu-item .mi-dots { min-width: 20px; }
  /* Two price columns have to survive a narrow screen. Wrapping put the bottle
     price on its own line under long names, so here the row never wraps: the
     name takes the slack and the two figures hold their columns. */
  .menu-cat.two-way .menu-item { flex-wrap: nowrap; align-items: baseline; }
  .menu-cat.two-way .mi-name { min-width: 0; max-width: none; flex: 1 1 auto; }
  .menu-cat.two-way .mi-dots { flex: 0 1 18px; min-width: 0; }
  .menu-cat.two-way .mi-price { flex: none; width: 3.6em; }
  .menu-cat.two-way .mi-price.alt { width: 4.4em; }
  .menu-cat.two-way .mi-head .mi-price { font-size: 8.5px; letter-spacing: 0.06em; }
}
@media (max-width: 720px) {
  .account-main { padding: 110px 0 50px; min-height: auto; }
  .nav-auth { padding: 8px 14px !important; font-size: 11px; }
  .auth-card { padding: 26px 20px; }
  #signupForm { grid-template-columns: 1fr; }
  .res-card { flex-wrap: wrap; gap: 10px; }
  .res-when { min-width: 70px; }
  .contact-band { padding: 72px 0; }
  .contact-cards { grid-template-columns: minmax(0, 1fr); }
  .contact-actions .btn { width: 100%; }
}
/* On a short screen, centring a tall card pushes it below the fold */
@media (max-height: 900px) { .account-main { align-items: flex-start; padding-top: 88px; } }

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

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

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