/* Le Trica design system.
   Everything here is taken off the house itself rather than invented: the
   cream paper and carbon ink of the printed carte, the torn edge where its
   black panels meet the page, the engraved fist-and-fork of the badge, and
   the brush script the house writes "Special" and "Couscous" with. The house
   is two things at once — authentic restaurant, crazy bar — so the page is
   ink on cream by the plate, and carbon night with a violet stage-light
   where the evening runs long.

   One motif, used everywhere and owned by nobody else on this VPS: the
   marquee strip — a run of cream and violet bulbs on carbon, drawn as a
   band — closes the signature band and the footer the way the torn black
   edge closes every page of the printed carte. */

:root {
  --creme: #f2ecdd;        /* the cream of the printed carte: the page ground */
  --creme-2: #e8dfc9;      /* deeper cream, for the printed bands */
  --card: #fbf8ec;         /* a clean plate: cards and panels */
  --ink: #221b12;          /* carbon ink, warmed the way old print warms */
  --ink-soft: #3b3222;
  --para: #57503d;         /* the paragraph voice; umber with a paper cast */
  --violet: #5b36ba;       /* the stage-light violet: the first voice */
  --violet-deep: #47289c;  /* the same light where small type needs contrast */
  --violet-ink: #3d2287;   /* prices at 15px on cream clear 4.5:1 here */
  --carbon: #17120a;       /* the carte's black panels: the solid button */
  --carbon-soft: #453c2a;
  --wine: #8a3325;         /* the one drop of colour on the drinks card:
                              the wine mid-pour. The second voice */
  --wine-deep: #6b2418;
  --night: #131009;        /* carbon night. The evening bands */
  --night-deep: #0b0805;   /* the deep black the footer sits on */
  --zest: rgba(91, 54, 186, 0.07);
  --line: rgba(34, 27, 18, 0.18);
  --line-soft: rgba(34, 27, 18, 0.09);
  --on-dusk: #f2ecdd;      /* what reads on the night bands */
  --on-dusk-dim: #b5aa93;
  --dusk-line: rgba(242, 236, 221, 0.18);
  --dusk-line-soft: rgba(242, 236, 221, 0.1);
  --ok: #2f7a52;
  --err: #b3403a;

  /* The two printed bands (the carte and the hours) sit on the cream of the
     printed menu, grain-watermarked rather than photographed. */
  --paper: #ece3cc;
  --paper-2: #e0d5b4;
  --ink-on-paper: #221b12;
  --para-on-paper: #5a5240;
  --gold-on-paper: #47289c;
  --rule-on-paper: rgba(34, 27, 18, 0.2);

  /* Light. One wash per band, each anchored somewhere different: violet
     where the stage-light falls, one patch of wine where a glass is poured. */
  --sun-tr: radial-gradient(70% 55% at 88% 0%, rgba(91, 54, 186, 0.06), transparent 70%);
  --sun-tl: radial-gradient(70% 55% at 12% 0%, rgba(138, 51, 37, 0.07), transparent 70%);
  --sun-bc: radial-gradient(85% 60% at 50% 100%, rgba(91, 54, 186, 0.07), transparent 72%);
  --wine-tl: radial-gradient(70% 55% at 8% 0%, rgba(138, 51, 37, 0.05), transparent 70%);

  /* Oswald carries the badge's condensed caps; Alfa Slab One is the slab the
     printed carte heads its sections with (ENTREES, PIZZA, VINS). */
  --display: 'Oswald', 'Arial Narrow', sans-serif;
  --slab: 'Alfa Slab One', 'Rockwell', serif;
  --sans: 'Work Sans', 'Segoe UI', system-ui, sans-serif;
  /* Yellowtail is the hand on the house's own posters: "Special", "Couscous
     chaque vendredi". The kickers, the note on the programme strip, the note
     beside the hours. It is never used for body copy. */
  --script: 'Yellowtail', 'Segoe Script', cursive;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* The marquee strip: cream and violet bulbs on carbon, drawn. It closes
     the signature band and the footer the way the torn black edge closes
     every page of the printed carte. */
  --perfo: repeating-linear-gradient(90deg,
      var(--carbon) 0 14px, #f5efe0 14px 20px,
      var(--carbon) 20px 34px, #9a6bff 34px 40px,
      var(--carbon) 40px 54px, #f5efe0 54px 60px);

  /* The tooth of uncoated paper: a faint square grid both ways, at an alpha
     the eye reads as texture rather than lines. */
  --weave: repeating-linear-gradient(90deg,
      rgba(34, 27, 18, 0.02) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(0deg,
      rgba(34, 27, 18, 0.02) 0 1px, transparent 1px 46px);
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--weave), var(--creme);
  color: var(--para);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

::selection { background: var(--violet); color: #fff; }

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

/* ---------- Typography ---------- */
/* The badge arches TRICA in heavy condensed caps and the carte heads its
   sections in a slab, so headings here do the same: Oswald where a line
   must stay lean, Alfa Slab One where a section announces itself. */
h1, h2, h3 {
  font-family: var(--display);
  font-weight: 600;
  color: var(--ink);
  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. The house alternates left and centred heads through the page so
   it never reads as a template. */
/* The eyebrow is written in the hand the house writes "Special" with. */
.kicker {
  display: flex; align-items: center; gap: 20px;
  font-family: var(--script); font-weight: 400;
  font-size: 22px; letter-spacing: 0.01em; text-transform: none;
  color: var(--violet-deep); line-height: 1;
}
.kicker::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.section-head.center .kicker::before { content: ''; flex: 1; height: 1px; background: var(--line); }

.section-title {
  font-family: var(--slab);
  font-size: clamp(26px, 3.3vw, 44px);
  margin: 20px 0 0;
  letter-spacing: 0.015em;
  text-transform: uppercase;
  font-weight: 400;
  max-width: 22ch;
}
.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(84px, 10vw, 150px) 0; position: relative; }
.section-head { margin-bottom: clamp(40px, 5vw, 64px); }
.section-head.center { text-align: center; }
.section-head.center .section-sub { margin-left: auto; margin-right: auto; }

/* The side rail: the address, set vertically down the left edge the way it is
   printed down the spine of the carte. Desktop only. */
.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: 600;
  font-size: 10.5px; letter-spacing: 0.4em; text-transform: uppercase;
  color: var(--ink-soft); opacity: 0.45;
  pointer-events: none;
}
@media (max-width: 1400px) { .side-rail { display: none; } }

/* ---------- Buttons ---------- */
/* A button is a rubber stamp: near-square, with a second line drawn just
   inside the edge the way the badge rings itself twice. The solid one is a
   carte panel: cream letters on carbon black.
   ::after draws the inner ring so the label never fights a border. */
.btn {
  display: inline-block;
  position: relative;
  z-index: 0;
  padding: 17px 42px;
  border: 0;
  border-radius: 5px;
  background: var(--violet-deep);
  color: #f5efe0;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  text-indent: 0.16em;
  font-size: 11.5px;
  font-weight: 600;
  text-align: center;
  transition: background 0.4s var(--ease), color 0.4s var(--ease),
    transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.btn::after {
  content: '';
  position: absolute; inset: 4px; pointer-events: none;
  border: 1px solid rgba(245, 239, 224, 0.45);
  border-radius: 1px;
  transition: border-color 0.4s var(--ease);
}
.btn:hover {
  background: var(--ink);
  color: var(--creme);
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(23, 18, 10, 0.22);
}
.btn:hover::after { border-color: rgba(242, 236, 221, 0.4); }

.btn.solid { background: var(--carbon); color: #f5efe0; }
.btn.solid::after { border-color: rgba(245, 239, 224, 0.4); }
.btn.solid:hover { background: var(--ink); color: var(--creme); }
.btn.solid:hover::after { border-color: rgba(242, 236, 221, 0.4); }

.btn.ghost {
  background: transparent; color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--line);
}
.btn.ghost::after { border-color: transparent; }
.btn.ghost:hover { background: var(--ink); color: var(--creme); box-shadow: none; }

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

.btn.danger { background: var(--err); color: #fff; }
.btn.danger::after { border-color: rgba(255, 255, 255, 0.45); }
.btn.danger:hover { background: var(--ink); color: var(--creme); }

/* ---------- The bands ---------- */
/* A daylight page divides itself with shadow, not gilt: a soft hairline
   between bands, and each light band carrying its own wash of light anchored
   somewhere different. Two bands are carbon night, and they close under
   the marquee strip. */
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: linear-gradient(90deg, transparent, var(--line) 18%, var(--line) 82%, transparent);
  z-index: 2;
}
.hero::before { display: none; }

#about { background-image: var(--sun-tr); }
#spaces { background-image: var(--wine-tl); }
.programme-section { background-image: var(--sun-bc); }
.gallery-section { background: var(--creme-2); }

/* ---------- Paper ---------- */
/* The carte and the hours are printed things, so they sit on the cream of
   the printed menu: a sheet warmed a shade past the page, watermarked with
   the faintest tile grid. Fixed, so the two printed bands read as one sheet
   running behind the page. */
section.paper {
  background-color: var(--paper);
  background-image:
    radial-gradient(100% 68% at 50% -8%, rgba(255, 255, 255, 0.55), 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);
}
.paper::before {
  background: linear-gradient(90deg, transparent, var(--rule-on-paper) 18%, var(--rule-on-paper) 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(34, 27, 18, 0.26); }
.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: #2f7a52; }

.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(34, 27, 18, 0.24); }
.paper .hours-list .time { color: var(--para-on-paper); }
.paper .hours-list .closed { color: #b3403a; }
.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); }
.paper #map { border-color: var(--rule-on-paper); }
.paper #map .leaflet-tile-pane { filter: sepia(0.18) saturate(0.78) brightness(1.02) contrast(0.96); }
.paper #map .leaflet-control-attribution { background: rgba(236, 227, 204, 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 canvas the button keeps its own ink */
.paper .btn { background: var(--ink-on-paper); color: var(--paper); }
.paper .btn::after { border-color: rgba(236, 227, 204, 0.4); }
.paper .btn:hover { background: var(--violet-deep); color: #f5efe0; }
.paper .btn.solid { background: var(--violet); color: #f5efe0; }
.paper .btn.solid::after { border-color: rgba(245, 239, 224, 0.4); }
.paper .btn.solid:hover { background: var(--ink-on-paper); color: var(--paper); }
.paper .btn.solid:hover::after { border-color: rgba(236, 227, 204, 0.4); }
.paper ::selection { background: var(--ink-on-paper); color: var(--paper); }

/* ---------- Nav ---------- */
/* Over the hero the bar is glass over the photograph; once the page scrolls
   it becomes the ivory of the page, and the type flips to ink. */
.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(242, 236, 221, 0.94);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  padding: 10px 0;
  box-shadow: 0 1px 0 var(--line-soft), 0 12px 34px rgba(23, 18, 10, 0.08);
}
.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 sits transparent, straight on the bar. Over the hero photograph a
   soft shadow lifts it off the picture; once the bar turns ivory on scroll the
   shadow is dropped and the logo reads on its own. */
.nav-logo img {
  height: 60px; width: auto; flex: none;
  filter: drop-shadow(0 2px 10px rgba(10, 7, 4, 0.55));
  transition: height 0.4s var(--ease), filter 0.4s var(--ease);
}
.nav.scrolled .nav-logo img { height: 48px; 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: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  text-indent: 0.14em;
  color: #f5efe0;
  opacity: 0.95;
  text-shadow: 0 1px 10px rgba(10, 7, 4, 0.6);
  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 { color: var(--ink); text-shadow: none; }
/* The marquee strip in miniature: the underline is a run of stage bulbs */
.nav-links a::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 2px; height: 5px;
  background: no-repeat center / auto 100%
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 6'%3E%3Ccircle cx='14' cy='3' r='2.4' fill='%239a6bff'/%3E%3Ccircle cx='32' cy='3' r='2.4' fill='%239a6bff'/%3E%3Ccircle cx='50' cy='3' r='2.4' fill='%239a6bff'/%3E%3Ccircle cx='68' cy='3' r='2.4' fill='%239a6bff'/%3E%3Ccircle cx='86' cy='3' r='2.4' fill='%239a6bff'/%3E%3C/svg%3E");
  transform: scaleX(0); transform-origin: right;
  transition: transform 0.5s var(--ease);
}
.nav-links a:hover { opacity: 1; color: var(--violet); }
.nav.scrolled .nav-links a:hover { color: var(--violet-deep); }
.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: 1.5px solid rgba(245, 239, 224, 0.6); padding: 10px 22px !important; border-radius: 10px; }
.nav-cta:hover { background: var(--violet); border-color: var(--violet); color: #f5efe0 !important; }
.nav.scrolled .nav-cta { border-color: var(--line); }
.nav.scrolled .nav-cta:hover { background: var(--violet); border-color: var(--violet); color: #f5efe0 !important; }
.nav-cta::after { display: none; }

/* Two-state switch with the knob sliding under the active language */
.lang-switch {
  position: relative; display: flex; padding: 3px;
  border: 1px solid rgba(245, 239, 224, 0.35); border-radius: 10px;
}
.nav.scrolled .lang-switch { border-color: var(--line-soft); }
.lang-switch::before {
  content: ''; position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px);
  background: var(--violet);
  border-radius: 7px;
  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: #f5efe0;
  font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; padding: 6px 14px;
  transition: color 0.35s;
}
.nav.scrolled .lang-switch button { color: var(--para); }
.lang-switch button.active, .nav.scrolled .lang-switch button.active { color: #f5efe0; }

.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: 2px; border-radius: 2px; background: #f5efe0; transition: 0.4s var(--ease); }
.nav.scrolled .burger span { background: var(--ink); }
.nav.menu-open .burger span { background: var(--ink); }
.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(--night-deep); }
.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%); } }
/* Held light on purpose: the film is the room and it is the point of the
   hero. A pool of shade under the words, a vignette, and a blue foot the
   next band can arrive out of. */
.hero-bg::after {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(50% 44% at 50% 48%, rgba(10, 7, 4, 0.62), rgba(10, 7, 4, 0.28) 62%, transparent 80%),
    linear-gradient(180deg, rgba(10, 7, 4, 0.42) 0%, rgba(10, 7, 4, 0.06) 40%, rgba(23, 15, 45, 0.52) 100%);
}
.hero-content { position: relative; z-index: 2; padding: 0 24px; }
/* The line arrives in the house's own hand — the brush the posters write
   "Special" and "Couscous" with. One orchestrated arrival, then nothing. */
.hero-script {
  font-family: var(--script);
  font-size: clamp(46px, 7.2vw, 104px);
  color: #f5efe0;
  font-weight: 400;
  text-transform: none;
  line-height: 1.12;
  letter-spacing: 0.005em;
  max-width: 17ch;
  margin: 0 auto;
  text-shadow: 0 6px 46px rgba(10, 7, 4, 0.65);
}
.hero-tag {
  margin-top: 26px;
  font-family: var(--sans);
  color: #b99cff;
  text-shadow: 0 2px 22px rgba(10, 7, 4, 0.8);
  font-size: clamp(11.5px, 1.25vw, 14px);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5em;
  text-indent: 0.5em;
}
.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) scale(0.985); }
  to { opacity: 1; transform: none; }
}
@keyframes navItemIn { to { opacity: 1; transform: none; } }

/* The hours: the two facts people look for, morning and midnight */
.hero-hours {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  margin-top: 38px;
  font-family: var(--sans); font-size: 12px; font-weight: 600;
  letter-spacing: 0.36em; text-indent: 0.36em;
  color: #b99cff;
  text-shadow: 0 2px 18px rgba(10, 7, 4, 0.85);
}
.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 ---------- */
/* Photographs are pasted like prints on the carte: a plate of ivory for a
   frame, a hard carbon offset underneath the way a print block casts its
   shadow. Hover lifts the print, it never draws on the picture. */
.img-frame {
  position: relative; overflow: hidden;
  border-radius: 6px;
  border: 8px solid var(--card);
  box-shadow: 10px 10px 0 rgba(23, 18, 10, 0.92), 0 18px 44px rgba(23, 18, 10, 0.16);
  transition: transform 0.7s var(--ease), box-shadow 0.7s var(--ease);
}
.img-frame img { transition: transform 1.4s var(--ease); border-radius: 2px; }
.img-frame:hover { transform: translateY(-4px); box-shadow: 12px 14px 0 rgba(23, 18, 10, 0.92), 0 26px 60px rgba(23, 18, 10, 0.2); }
.img-frame:hover img { transform: scale(1.05); }

/* ---------- 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%;
  transform: rotate(2.2deg);
  box-shadow: 0 30px 64px rgba(23, 18, 10, 0.26);
}
.about-images .img-accent:hover { transform: rotate(0.6deg) translateY(-4px); }
.about-text p { color: var(--para); margin: 26px 0; font-size: 16.5px; }

/* ---------- Menu ---------- */
.menu-section { background: var(--creme); }
.menu-tabs { display: flex; justify-content: center; gap: 10px; margin-bottom: 46px; }
.menu-tabs button {
  background: transparent; border: 1.5px solid var(--line); color: var(--para);
  border-radius: 10px;
  padding: 13px 40px;
  font-family: var(--sans); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.18em; text-indent: 0.18em; font-size: 12px;
  transition: 0.4s var(--ease);
}
.menu-tabs button.active { border-color: var(--ink); color: var(--creme); background: var(--ink); }
.menu-cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(38px, 4vw, 64px) clamp(44px, 6vw, 96px); align-items: start; }
@media (min-width: 1500px) { .menu-cols { grid-template-columns: repeat(3, 1fr); } }
/* min-width:0 stops a long, un-wrapping dish name from forcing its 1fr track
   wider than the container and blowing the whole grid past the page edge. */
.menu-cat { break-inside: avoid; min-width: 0; }
/* The carte's headings, set the way the printed carte sets them: the name in
   the slab over its column, the note under it in the hand, one rule closing
   the block. */
.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: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.26em; text-indent: 0.26em;
  color: var(--ink);
  line-height: 1.5;
  margin: 0;
}
.menu-cat-sub {
  font-family: var(--script);
  color: var(--violet-deep);
  font-size: 18px;
  line-height: 1.4;
  margin: 7px 0 0;
}
.menu-item { display: flex; align-items: baseline; gap: 10px; padding: 7px 0; }
/* Names wrap when they must: some dishes carry a gloss ("Khlii tagine with
   eggs · cured beef") that is far too long to hold on one line in a column. */
.menu-item .mi-name { font-family: var(--display); font-size: 16.5px; font-weight: 500; color: var(--ink); white-space: normal; overflow-wrap: anywhere; }
.menu-item .mi-dots { flex: 1; min-width: 18px; border-bottom: 1px dotted rgba(87, 80, 63, 0.4); transform: translateY(-5px); }
.menu-item .mi-price { font-family: var(--display); font-weight: 500; color: var(--violet-ink); font-size: 15.5px; white-space: nowrap; letter-spacing: 0.03em; }
.menu-item-desc { color: var(--para); opacity: 0.82; 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: 600; font-style: normal;
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--para); opacity: 0.75;
}

/* ---------- The signature band ---------- */
/* The crazy bar after dark: the one band on the page that goes full carbon,
   because the dishes that wear the house's name deserve the stage. The
   marquee strip closes its top edge, a violet stage-light falls from the
   right, and the list sits on a plate of ivory the way the board arrives. */
.formule {
  background:
    radial-gradient(90% 80% at 85% 8%, rgba(122, 76, 235, 0.4), transparent 62%),
    radial-gradient(70% 80% at 8% 100%, rgba(138, 51, 37, 0.3), transparent 66%),
    linear-gradient(112deg, #1c1610 0%, #17120a 46%, #0b0805 100%);
}
.formule::before {
  height: 8px;
  background: var(--perfo) !important;
  top: -1px;
}
.formule .kicker { color: #b99cff; }
.formule .kicker::after { background: rgba(242, 236, 221, 0.25); }
.formule .section-title { color: #f5efe0; }
.formule-inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 7vw, 100px); align-items: center; }
.formule-copy .section-title { margin-bottom: 0; font-size: clamp(34px, 3.7vw, 54px); }
.formule-copy > p { color: rgba(242, 236, 221, 0.85); margin-bottom: 26px; max-width: 44ch; }
.formule-time {
  font-family: var(--script); font-size: 28px;
  color: #b99cff; margin: 18px 0 !important;
}
.formule-copy .btn { margin-top: 8px; background: #6d43d6; color: #f5efe0; }
.formule-copy .btn::after { border-color: rgba(245, 239, 224, 0.4); }
.formule-copy .btn:hover { background: var(--card); color: var(--ink); }
.formule-copy .btn:hover::after { border-color: rgba(34, 27, 18, 0.35); }
/* The board: an ivory tile with the glaze line inside it */
.formule-list {
  position: relative;
  background: var(--card);
  border-radius: 4px;
  box-shadow: 0 26px 60px rgba(8, 6, 3, 0.45);
  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(91, 54, 186, 0.28);
  border-radius: 2px;
}
.fm-row { display: flex; align-items: baseline; gap: 12px; padding: 10px 0; }
.fm-name { font-family: var(--display); font-weight: 600; font-size: 17px; color: var(--ink); }
.fm-dots { flex: 1; border-bottom: 1px dotted rgba(87, 80, 63, 0.38); transform: translateY(-4px); }
.fm-price { font-family: var(--display); font-weight: 500; font-size: 16px; color: var(--violet-ink); white-space: nowrap; letter-spacing: 0.03em; }
.formule-list .menu-item-desc { color: var(--para); }
@media (max-width: 900px) { .formule-inner { grid-template-columns: 1fr; } }

/* ---------- La semaine ---------- */
/* Seven days, read straight off the opening hours the owner keeps in the
   panel. A tide table more than a bill: the hours hold steady and the note
   under each day is the thing worth coming for. */
.programme-section { background: var(--creme); }
.programme-grid {
  display: grid; grid-template-columns: repeat(7, 1fr);
  border: 1px solid var(--line-soft); border-right: 0;
  border-radius: 16px; overflow: hidden;
  background: var(--card);
  box-shadow: 0 16px 44px rgba(23, 18, 10, 0.08);
}
.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: var(--zest); }
.prog-day.today { background: rgba(91, 54, 186, 0.08); }
.prog-day.today::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--violet);
}
.prog-name {
  display: block; font-family: var(--sans); font-weight: 600; font-size: 11.5px;
  text-transform: uppercase; letter-spacing: 0.18em; text-indent: 0.18em;
  color: var(--ink);
}
.prog-hours { display: block; font-size: 12.5px; color: var(--para); opacity: 0.75; margin-top: 8px; letter-spacing: 0.06em; }
.prog-note {
  display: block; font-family: var(--script); font-size: 24px; line-height: 1.2;
  color: var(--violet-deep); margin-top: 16px; min-height: 34px;
}
.prog-note:empty::before { content: '·'; opacity: 0.3; }
.prog-day.shut .prog-hours { color: var(--err); opacity: 0.9; }
@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: 21px; } }

/* ---------- Spaces ---------- */
.spaces-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
/* Each room is a poster on the wall: straight, framed hard, shadow offset
   like the pasted prints above. */
.space-card {
  position: relative; overflow: hidden; aspect-ratio: 3 / 4.2;
  border-radius: 8px;
  box-shadow: 8px 8px 0 rgba(23, 18, 10, 0.9), 0 16px 40px rgba(23, 18, 10, 0.14);
}
.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 48%, rgba(14, 11, 6, 0.88));
}
.space-card figcaption {
  position: absolute; left: 0; right: 0; bottom: 28px; z-index: 4;
  text-align: center;
  font-family: var(--sans); font-weight: 600;
  font-size: 13px; letter-spacing: 0.22em; text-indent: 0.22em; text-transform: uppercase; color: #f5efe0;
  text-shadow: 0 1px 12px rgba(10, 7, 4, 0.6);
}
.space-card figcaption small:empty { display: none; }
.space-card figcaption small {
  display: block;
  font-family: var(--script); font-weight: 400;
  font-size: 19px; letter-spacing: 0.02em; text-indent: 0; text-transform: none;
  color: #b99cff; margin-top: 7px; line-height: 1.4;
}

/* ---------- Gallery ---------- */
/* Six pictures pasted like prints on a board: the lead takes four cells,
   the rest one each, and the gaps read as grout. */
.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;
  border-radius: 5px;
  box-shadow: 0 10px 30px rgba(23, 18, 10, 0.12);
}
.gal-grid figure:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.gal-grid img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 1.2s var(--ease), filter 0.6s var(--ease);
}
.gal-grid figure:hover img { transform: scale(1.05); filter: saturate(1.08) brightness(1.04); }
@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; }
}

.lightbox {
  position: fixed; inset: 0; z-index: 90; background: rgba(13, 10, 6, 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; border-radius: 8px; box-shadow: 0 40px 100px rgba(0, 0, 0, 0.6); }
.lightbox button {
  position: absolute; background: none; border: 1.5px solid var(--dusk-line); color: var(--on-dusk);
  border-radius: 12px;
  width: 48px; height: 48px; font-size: 18px; transition: 0.35s; display: grid; place-items: center;
}
.lightbox button:hover { border-color: var(--violet); color: var(--violet); }
.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: 600; text-transform: uppercase; letter-spacing: 0.16em; text-indent: 0.16em; font-size: 11.5px; color: var(--ink); }
.hours-list .day-note { font-family: var(--script); font-size: 20px; line-height: 1.15; color: var(--violet-deep); }
.hours-list .dots { flex: 1; border-bottom: 1px dotted rgba(87, 80, 63, 0.32); transform: translateY(-4px); }
.hours-list .time { color: var(--ink-soft); letter-spacing: 0.06em; }
.hours-list .closed { color: var(--err); font-family: var(--display); font-weight: 500; }
.contact-lines { margin-top: 30px; display: grid; gap: 12px; color: var(--para); font-size: 15px; }
.contact-lines a:hover { color: var(--violet-deep); }
.contact-lines strong { color: var(--violet-deep); font-weight: 500; }
#map { min-height: 440px; height: 100%; border: 1px solid var(--line); border-radius: 16px; z-index: 1; }
#map .leaflet-tile-pane { filter: sepia(0.14) saturate(0.85) brightness(1.02) contrast(0.97); }
#map .leaflet-control-attribution { background: rgba(242, 236, 221, 0.8); color: var(--para); }
#map .leaflet-control-attribution a { color: var(--violet-deep); }
#map .leaflet-bar a { background: var(--card); color: var(--ink); border-bottom-color: var(--line); }
#map .leaflet-bar a:hover { background: var(--creme-2); color: var(--violet-deep); }
.map-pin { position: relative; width: 22px; height: 22px; }
.map-pin::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: var(--violet); border: 3px solid var(--card);
  box-shadow: 0 2px 12px rgba(23, 18, 10, 0.4);
}
.map-pin::after {
  content: ''; position: absolute; inset: -12px; border-radius: 50%;
  border: 2px solid var(--violet);
  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(--card); color: var(--ink); border-radius: 10px; }
.leaflet-popup-content a { color: var(--violet-deep); font-weight: 500; }

/* ---------- Reservation ---------- */
/* The room after dark: the photograph under a night-glaze veil, and the form
   on a plate of ivory in the middle of it. */
.reserve-section {
  background:
    linear-gradient(rgba(13, 10, 6, 0.8), rgba(10, 8, 4, 0.88)),
    url('../images/space-restaurant.jpg') center/cover fixed;
}
.reserve-panel {
  position: relative;
  max-width: 780px; margin: 0 auto;
  background: var(--card);
  border-radius: 6px;
  color: var(--para);
  box-shadow: 0 34px 90px rgba(8, 6, 3, 0.5);
  padding: clamp(36px, 5vw, 68px);
}
.reserve-panel::after {
  content: ''; position: absolute; inset: 11px; pointer-events: none;
  border: 1px solid rgba(91, 54, 186, 0.22);
  border-radius: 3px;
}
.reserve-panel > * { position: relative; z-index: 1; }
.reserve-panel .kicker { color: var(--violet-deep); }
.reserve-panel .kicker::before, .reserve-panel .kicker::after { background: var(--line); }
.reserve-panel .section-title { color: var(--ink); }
.reserve-panel .section-sub, .reserve-panel .form-note { color: var(--para); }
.reserve-panel .prefill-note { color: var(--violet-deep); }
.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: 600; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.2em; text-indent: 0.2em; color: var(--violet-deep); }
.form-field input, .form-field select {
  background: var(--creme);
  border: 1.5px solid var(--line-soft);
  color: var(--ink);
  padding: 15px 16px;
  font-family: var(--sans); font-size: 15px; font-weight: 400; letter-spacing: 0.02em;
  transition: border-color 0.35s;
  width: 100%; border-radius: 10px; appearance: none;
}
.form-field input:focus, .form-field select:focus { outline: none; border-color: var(--violet); }
.form-field input::placeholder { color: rgba(87, 80, 63, 0.5); }
.form-field select {
  background-image: linear-gradient(45deg, transparent 50%, var(--violet-deep) 50%), linear-gradient(135deg, var(--violet-deep) 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(--card); color: var(--ink); }
.form-field input[type='date'], .form-field input[type='time'] { color-scheme: light; }
.phone-row { display: grid; grid-template-columns: 136px 1fr; gap: 10px; }
.form-note { color: var(--para); opacity: 0.85; 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(87, 80, 63, 0.7); letter-spacing: 0.02em; }
.prefill-note { color: var(--violet-deep); font-size: 13px; margin-top: 12px; }

/* ---------- Footer ---------- */
/* The glazed night the evening ends on, closed under the tile strip. */
footer {
  background:
    radial-gradient(80% 70% at 12% 0%, rgba(91, 54, 186, 0.34), transparent 66%),
    var(--night-deep);
  color: var(--on-dusk-dim);
  padding: 90px 0 34px;
}
footer::before {
  height: 8px;
  background: var(--perfo);
}
.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: 700;
  text-transform: uppercase; letter-spacing: 0.22em; text-indent: 0.22em;
  margin-bottom: 20px; color: var(--violet);
}
.footer-grid p, .footer-grid a, .footer-grid li { color: var(--on-dusk-dim); font-size: 15.5px; line-height: 1.7; list-style: none; }
.footer-grid a:hover { color: var(--violet); }
.footer-grid ul { display: grid; gap: 12px; }
.footer-logo {
  height: 62px; width: auto; margin-bottom: 20px;
  /* Transparent on the deep teal; a faint light halo keeps the darker part of
     the wordmark from sinking into the ground. */
  filter: drop-shadow(0 0 1px rgba(242, 236, 221, 0.55)) drop-shadow(0 2px 8px rgba(0, 0, 0, 0.35));
}
.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. */
.socials a {
  width: 46px; height: 46px; display: block; border-radius: 10px;
  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, 0.4); }
.footer-bottom {
  border-top: 1px solid var(--dusk-line-soft); padding-top: 28px;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  color: var(--on-dusk-dim); opacity: 0.9; font-size: 13.5px; letter-spacing: 0.05em;
}
.footer-bottom a:hover { color: var(--violet); }

/* ---------- 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(10, 7, 4, 0.6) 0%, rgba(10, 7, 4, 0.42) 45%, rgba(23, 15, 45, 0.75) 100%);
}
.hero-video { display: block; }
.page-hero .hero-video { filter: blur(3px) saturate(0.98); 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(34px, 5vw, 60px); position: relative; z-index: 2; letter-spacing: 0.05em; text-transform: uppercase; color: #f5efe0; text-shadow: 0 6px 40px rgba(10, 7, 4, 0.6); }
.page-hero .kicker { position: relative; z-index: 2; color: #b99cff; }
.page-hero .kicker::after, .page-hero .kicker::before { background: rgba(251, 247, 234, 0.3); }
.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(--violet-deep); font-weight: 600; }
.legal p, .legal li { color: var(--para); font-size: 15px; margin-bottom: 12px; }
.legal ul { padding-left: 20px; }

/* ---------- Toast ---------- */
.toast {
  position: fixed; top: 0; left: 50%; z-index: 120;
  transform: translate(-50%, -130%);
  display: flex; align-items: center; gap: 14px;
  width: min(620px, calc(100vw - 32px));
  margin-top: 16px; padding: 16px 22px;
  border-radius: 14px;
  background: var(--card); color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: 0 18px 50px rgba(23, 18, 10, 0.3);
  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; }
.toast::before {
  content: ''; flex: none; width: 4px; align-self: stretch; border-radius: 2px;
  background: var(--ok);
}
.toast.err::before { background: var(--err); }
.toast .toast-close {
  margin-left: auto; flex: none; background: none; border: 0; cursor: pointer;
  font-size: 18px; line-height: 1; color: var(--para); padding: 0 2px;
}
.toast .toast-close:hover { color: var(--ink); }
@media (max-width: 560px) { .toast { font-size: 13.5px; padding: 14px 16px; } }

/* ---------- Account ---------- */
.nav-auth {
  border: 1.5px solid rgba(251, 247, 234, 0.5); border-radius: 10px;
  padding: 10px 20px !important; letter-spacing: 0.18em; text-indent: 0.18em;
  transition: background .35s, color .35s, border-color .35s;
}
.nav.scrolled .nav-auth { border-color: var(--line); }
.nav-auth::after { display: none; }
.nav-auth:hover { background: var(--violet); border-color: var(--violet); color: #f5efe0 !important; }
.nav-auth.signed-in { border-color: var(--violet); color: var(--violet) !important; }
.nav.scrolled .nav-auth.signed-in { color: var(--violet-deep) !important; border-color: var(--violet-deep); }
.nav-auth.signed-in:hover { background: var(--violet); border-color: var(--violet); color: #f5efe0 !important; }

.page-account { background: var(--night-deep); }
.page-account::before {
  content: ''; position: fixed; inset: 0; z-index: -2;
  background: url('/images/account-bg.jpg') center/cover no-repeat;
}
.page-account::after {
  content: ''; position: fixed; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(11, 20, 48, .66), rgba(11, 20, 48, .8) 55%, rgba(8, 14, 36, .92));
}
.page-account .nav {
  background: rgba(242, 236, 221, 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 .nav-links a, .page-account .nav .nav-right a { color: var(--ink); text-shadow: none; }
.page-account .nav .lang-switch { border-color: var(--line-soft); }
.page-account .nav .lang-switch button { color: var(--para); }
.page-account .nav .lang-switch button.active { color: #f5efe0; }
.page-account .nav .nav-auth { border-color: var(--line); }
.page-account .nav .burger span { background: var(--ink); }
.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(--dusk-line-soft); background: rgba(8, 14, 36, .6); }
.page-account footer::before { display: none; }

.auth-wrap { display: flex; justify-content: center; width: 100%; }
.auth-card {
  position: relative;
  width: min(580px, 100%); background: var(--card); border: 1px solid var(--line-soft);
  border-radius: 22px; padding: 34px 36px; text-align: center;
  box-shadow: 0 34px 80px rgba(8, 6, 3, 0.45);
}
.auth-card::after { content: ''; position: absolute; inset: 9px; pointer-events: none; border: 1px solid rgba(91, 54, 186, 0.16); border-radius: 3px; }
.auth-card > * { position: relative; z-index: 1; }
.auth-logo { width: 150px; 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: 600; font-size: 10px; text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--violet-deep); margin-top: 8px;
}
.auth-form input {
  width: 100%; background: var(--creme); border: 1.5px solid var(--line-soft);
  border-radius: 10px; padding: 12px 13px; color: var(--ink);
  font-family: var(--sans); font-size: 14.5px;
}
.auth-form input:focus { outline: none; border-color: var(--violet); }
.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.8; line-height: 16px; margin-top: 4px; }
.gender-row { display: flex; gap: 8px; }
.gender-row button {
  flex: 1; background: var(--creme); border: 1.5px solid var(--line-soft); border-radius: 10px;
  color: var(--para); padding: 10px 6px; font-size: 13px; font-family: var(--sans); transition: .3s;
}
.gender-row button:hover { border-color: var(--violet); }
.gender-row button.active { border-color: var(--violet); background: var(--zest); color: var(--violet-deep); }
.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(--violet-deep); text-decoration: underline; }
.pending-title { font-family: var(--display); font-size: 24px; font-weight: 600; margin-bottom: 8px; color: var(--ink); }

.auth-form select {
  width: 100%; background: var(--creme); border: 1.5px solid var(--line-soft);
  border-radius: 10px; padding: 12px 13px; color: var(--ink);
  font-family: var(--sans); font-size: 14.5px; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--violet-deep) 50%),
                    linear-gradient(135deg, var(--violet-deep) 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(--violet); }
.auth-form select option { background: var(--card); color: var(--ink); }

.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(--violet-deep); opacity: 1; }
.pw-eye.on .eye-open { display: none; }
.pw-eye.on .eye-shut { display: block; }
.pw-eye:hover { color: var(--ink); 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(--violet); 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(--violet-deep); text-decoration: underline; white-space: nowrap; }
.forgot-link:hover { color: var(--ink); }
.birthday-note {
  font-size: 12px; color: var(--violet-deep); margin-top: 10px; text-align: center;
  background: var(--zest); border: 1px solid var(--line-soft); border-radius: 10px; 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: var(--card);
  border: 1px solid var(--line-soft); border-radius: 18px; padding: 28px;
  box-shadow: 0 20px 50px rgba(8, 6, 3, 0.35);
}
.member-card h3 { font-family: var(--display); font-size: 21px; font-weight: 600; 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(--carbon), #d9a516 62%, #8a6a08); border: 0; }
.fidelity-card .kicker { display: block; margin-bottom: 8px; color: #5c4a10; }
.fidelity-card b { font-family: var(--display); font-size: 56px; font-weight: 600; color: #f5efe0; line-height: 1; }
.fidelity-card p { color: #4a3d13; font-size: 13px; margin-top: 12px; line-height: 20px; }
.fidelity-card.off b { color: #4a3d13; opacity: 0.6; }

.member-heading { font-family: var(--display); font-size: 24px; font-weight: 600; margin-bottom: 18px; color: #f5efe0; }
.res-list { display: grid; gap: 12px; }
.res-card {
  display: flex; align-items: center; gap: 18px; background: var(--card);
  border: 1px solid var(--line-soft); border-radius: 16px; padding: 17px 22px;
  box-shadow: 0 14px 36px rgba(8, 6, 3, 0.3);
}
.res-when { display: grid; min-width: 92px; }
.res-when b { font-family: var(--display); font-size: 20px; font-weight: 600; color: var(--violet-deep); }
.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: 500; color: var(--ink); }
.res-meta span { font-size: 12px; color: var(--para); opacity: 0.7; }
.res-badge { font-family: var(--sans); font-weight: 600; font-size: 10.5px; letter-spacing: 0.14em; text-indent: 0.14em; text-transform: uppercase; padding: 6px 13px; border-radius: 999px; border: 1.5px solid; }
.res-badge.pending { color: var(--violet-deep); border-color: rgba(91, 54, 186, 0.5); }
.res-badge.confirmed { color: var(--ok); border-color: rgba(47, 122, 82, 0.5); }
.res-badge.cancelled { color: var(--err); border-color: rgba(179, 64, 58, 0.5); }

.hidden { display: none !important; }

/* ---------- Contact band ---------- */
/* The bar at night: the photograph under a night-glaze veil, one warm lamp
   of stage-light violet in the middle of it. */
.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;
  /* height and z-index are load-bearing: the generic band divider sets every
     section's ::before to a 1px hairline at z-index 2, and without these the
     veil either collapses to that line or paints over the band's own type. */
  height: auto;
  z-index: 0;
  background: linear-gradient(180deg, rgba(11, 20, 48, .84), rgba(133, 100, 22, .5) 55%, rgba(11, 20, 48, .88));
}
.contact-band > .container { position: relative; z-index: 1; }
.contact-inner { text-align: center; max-width: 1080px; margin: 0 auto; }
.contact-inner .kicker { color: #b99cff; }
.contact-inner .kicker::before, .contact-inner .kicker::after { background: rgba(251, 247, 234, 0.28); }
.contact-inner .section-title { font-size: clamp(36px, 4.8vw, 56px); color: #f5efe0; }
.contact-lead { color: rgba(251, 247, 234, 0.85); 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(242, 236, 221, 0.94); border: 0; border-radius: 16px;
  padding: 19px 21px;
  box-shadow: 0 14px 38px rgba(8, 6, 3, 0.35);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
a.contact-card:hover { transform: translateY(-3px); box-shadow: 0 22px 50px rgba(8, 6, 3, 0.45); }
.cc-icon {
  width: 42px; height: 42px; flex: none; border-radius: 12px; display: grid; place-items: center;
  background: var(--zest); border: 1px solid rgba(91, 54, 186, 0.24);
}
.cc-icon svg { width: 16px; height: 16px; fill: var(--violet-deep); }
.cc-body { display: grid; gap: 3px; min-width: 0; }
.cc-body small { font-family: var(--sans); font-weight: 600; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--violet-deep); }
.cc-body b { font-weight: 500; font-size: 14px; line-height: 1.4; color: var(--ink); overflow-wrap: anywhere; }

.contact-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 32px; }
.contact-band .btn.ghost { color: #f5efe0; box-shadow: inset 0 0 0 1.5px rgba(251, 247, 234, 0.45); }
.contact-band .btn.ghost:hover { background: var(--card); color: var(--ink); box-shadow: none; }
.contact-band .socials { justify-content: center; }

/* ---------- Deals ---------- */
.deals-main { align-items: flex-start; padding-top: 120px; }
.deals-main .section-head { margin-bottom: 32px; }
.deals-main .section-head .section-title { color: #f5efe0; }
.deals-main .section-head .section-sub { color: rgba(251, 247, 234, 0.8); }
.deals-empty {
  background: var(--card); border: 1px solid var(--line-soft); border-radius: 18px;
  padding: 44px 32px; text-align: center; color: var(--para); max-width: 580px; margin: 0 auto;
  box-shadow: 0 20px 50px rgba(8, 6, 3, 0.35);
}
.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: #b99cff; font-weight: 600; 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: var(--card); border: 1px solid rgba(91, 54, 186, .2); border-radius: 16px;
  padding: 15px;
  box-shadow: 0 14px 36px rgba(8, 6, 3, 0.3);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.deal-card:hover { transform: translateY(-3px); box-shadow: 0 22px 48px rgba(8, 6, 3, 0.4); }
.deal-card img { width: 74px; height: 74px; border-radius: 12px; object-fit: cover; flex: none; }
.deal-body { min-width: 0; flex: 1; }
.deal-body h3 { font-family: var(--display); font-size: 18px; font-weight: 600; 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(--violet-deep); font-size: 18px; font-weight: 600; }
.deal-badge {
  position: absolute; top: 12px; right: 12px; background: var(--zest);
  color: var(--violet-deep); border-radius: 999px; padding: 4px 11px;
  font-family: var(--sans); font-weight: 600; font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
}
.mi-was { color: var(--para); opacity: 0.55; margin-right: 10px; font-size: 0.92em; }
.mi-deal { color: var(--ok); font-weight: 500; font-style: normal; }
.nav-deals { color: var(--violet) !important; }
.nav.scrolled .nav-deals { color: var(--violet-deep) !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(--violet-deep); margin-bottom: 12px; font-weight: 600;
}
.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: 2px; border-radius: 2px; background: var(--violet); }
.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: var(--creme); border: 1.5px solid var(--line-soft); color: var(--para);
  padding: 15px 16px; font-family: var(--sans); font-size: 15px; font-weight: 400;
  letter-spacing: 0.02em; text-align: left; border-radius: 10px;
  transition: border-color 0.35s, color 0.35s;
}
.timepick-btn:hover, .timepick-btn.open { border-color: var(--violet); }
.timepick-btn.chosen { color: var(--ink); }
.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(--violet-deep);
  transition: transform 0.3s var(--ease);
}
.timepick-btn.open .tp-caret { transform: rotate(180deg); }
.timepick-btn svg { width: 16px; height: 16px; fill: var(--violet-deep); 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(--card); border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 20px 46px rgba(23, 18, 10, 0.25);
}
.timepick-panel[hidden] { display: none; }
.timepick-slot {
  background: var(--creme); border: 1.5px solid transparent; color: var(--para);
  padding: 10px 4px; font-family: var(--sans); font-size: 13.5px; letter-spacing: 0.04em;
  border-radius: 8px;
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}
.timepick-slot:hover { background: var(--zest); color: var(--ink); border-color: var(--violet); }
.timepick-slot.on { background: var(--ink); color: var(--creme); border-color: var(--ink); }
.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(--creme); transition: opacity .3s ease;
}
.page-boot.gone { opacity: 0; pointer-events: none; }
.boot-mark { position: relative; width: 130px; height: 130px; display: grid; place-items: center; }
.boot-mark img { width: 86px; height: auto; }
.boot-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--line-soft); border-top-color: var(--violet);
  animation: bootSpin 1s linear infinite;
}
@keyframes bootSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .boot-ring { animation-duration: 2.6s; } }

/* ---------- Marketing ---------- */
.promo-banner {
  position: fixed; inset: 0 0 auto 0; z-index: 70;
  background: var(--wine-deep);
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  overflow: hidden; padding: 9px 0;
}
.promo-track {
  display: flex; width: max-content;
  animation-name: promo-scroll; animation-timing-function: linear; animation-iteration-count: infinite;
  will-change: transform;
}
.promo-banner:hover .promo-track { animation-play-state: paused; }
.promo-banner-text {
  flex: none; white-space: nowrap; padding-right: 5rem;
  color: #f2f0e4; font-weight: 600;
  font-family: var(--sans); font-size: 13.5px; letter-spacing: 0.14em; text-decoration: none;
  text-transform: uppercase;
}
a.promo-banner-text:hover { color: #b99cff; }
@keyframes promo-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .promo-track { animation: none; } }
@media (max-width: 860px) { .promo-banner { font-size: 13px; padding: 8px 14px; } }

.promo-notice {
  display: block; margin: 0 auto 28px; max-width: 660px;
  background: var(--wine-deep); color: #f2f0e4; font-weight: 600;
  border-radius: 12px; padding: 12px 28px;
  font-family: var(--sans); 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: 48px; }
  .nav.scrolled .nav-logo img { height: 42px; }
  .nav-links {
    position: fixed; inset: 0; height: 100svh;
    background: var(--creme);
    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; color: var(--ink); text-shadow: none; }
  .nav-links .nav-cta { border: 1.5px solid var(--violet); padding: 14px 30px !important; color: var(--violet-deep); }
  .nav-links li { width: 100%; text-align: center; opacity: 0; transform: translateY(14px); }
  .nav-links .lang-switch { display: inline-flex; border-color: var(--line); }
  .nav-links .lang-switch button { color: var(--para); }
  .nav-links .lang-switch button.active { color: #f5efe0; }
  .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; }
  .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 arch
   in the middle does not, which is the whole trick. The plate behind it is
   not decoration: the page runs light bands against night ones, and the
   badge crosses both. */
.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(255, 252, 241, 0.9); border: 1px solid var(--line-soft);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 12px 34px rgba(23, 18, 10, 0.2);
}
.reserve-badge svg { position: absolute; inset: 0; animation: spin 14s linear infinite; }
.reserve-badge svg text {
  fill: var(--violet-deep); font-family: var(--sans); font-weight: 600;
  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: 58px; height: auto; }
.reserve-badge:hover .badge-center { transform: scale(1.09); }
@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .reserve-badge svg { animation: none; }
}

@media (max-width: 1024px) {
  .reserve-badge { display: none; }
}

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

.bookings-off .contact-actions .btn.ghost { margin: 0 auto; }

/* ---------- The carte's own language ---------- */
.carte-lang {
  display: flex; justify-content: center; gap: 0;
  margin: -26px 0 44px;
}
.carte-lang button {
  background: transparent; border: 0; cursor: pointer;
  font-family: var(--sans); font-size: 12px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 8px 16px; color: var(--para); opacity: .75;
  border-bottom: 2px 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(--ink); }
.carte-lang button.active { opacity: 1; color: var(--violet-deep); border-bottom-color: var(--violet); }
.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 cobalt, because a guest recognises it
   before he reads it. */
.reserve-panel .btn.wa-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  background: #1fa855;
  color: #ffffff;
  text-decoration: none;
  text-indent: 0;
}

.reserve-panel .btn.wa-btn::after { border-color: rgba(255, 255, 255, 0.45); }

.reserve-panel .btn.wa-btn:hover,
.reserve-panel .btn.wa-btn:focus-visible { background: #157a3c; color: #fff; }

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