/* La Bodeguita design system.
   Taken off the house itself, not invented: the cubist bull of the logo is
   six flat colours, orange, turquoise, cobalt, yellow, magenta and green,
   cut into facets, with a black geometric wordmark across it, and the printed
   carte repeats the same idea: white paper, a coloured square before every
   section title, a six-colour ribbon under the word MENU, and two-tone
   triangles pinned in the four corners of every page.

   So the site is white paper and carbon ink with the six colours used as
   facets: coloured squares before titles, triangles cut from the corners of
   photographs and sections, and one ribbon of the six colours that closes the
   signature band and the footer, the way it closes the cover of the carte.
   Type is geometric like the wordmark (Unbounded), read in a plain grotesk
   (Hanken Grotesk), with a monospaced voice (Space Mono) for the eyebrows,
   the prices and the hours: the ticket printer at the bar. */

:root {
  --blanco: #fbf9f3;       /* the paper of the printed carte: the page ground */
  --blanco-2: #f1ede3;     /* the same paper a shade deeper, for a quiet band */
  --card: #ffffff;         /* a plate, a card, the panel of the booking form */
  --ink: #131313;          /* the black of the wordmark */
  --ink-soft: #2c2c30;
  --para: #4a4a52;         /* the paragraph voice */

  /* The six colours of the bull, flat, never gradiented */
  --naranja: #f26b21;
  --naranja-deep: #d4551a;
  --turquesa: #1aa5a0;
  --turquesa-deep: #128581;
  --turquesa-lit: #7fd3cf; /* the turquoise that reads on the night bands */
  --azul: #1f56a5;         /* the working colour: links, prices, focus */
  --azul-deep: #17427f;
  --azul-ink: #163d75;     /* prices at 14px on white clear 4.5:1 here */
  --amarillo: #f7c31c;
  --magenta: #ae1e6c;      /* the eyebrow colour */
  --magenta-deep: #8c1656;
  --verde: #43a047;

  --carbon: #131313;
  --carbon-soft: #3a3a40;
  --noche: #101014;        /* the night bands: the bar after dark */
  --noche-deep: #0a0a0e;
  --zest: rgba(26, 165, 160, 0.09);
  --line: rgba(19, 19, 19, 0.16);
  --line-soft: rgba(19, 19, 19, 0.08);
  --on-dusk: #fbf9f3;
  --on-dusk-dim: #b6b4ad;
  --dusk-line: rgba(251, 249, 243, 0.18);
  --dusk-line-soft: rgba(251, 249, 243, 0.1);
  --ok: #2f7a52;
  --err: #b3403a;

  /* The carte and the hours sit on the white of the printed menu. */
  --paper: #ffffff;
  --paper-2: #f3efe4;
  --ink-on-paper: #131313;
  --para-on-paper: #4a4a52;
  --gold-on-paper: #17427f;
  --rule-on-paper: rgba(19, 19, 19, 0.16);

  /* Unbounded is the geometric voice of the wordmark; Hanken Grotesk reads;
     Space Mono is the ticket printer: eyebrows, prices, hours, small labels. */
  --display: 'Unbounded', 'Arial Black', 'Segoe UI', sans-serif;
  --slab: 'Unbounded', 'Arial Black', 'Segoe UI', sans-serif;
  --sans: 'Hanken Grotesk', 'Segoe UI', system-ui, sans-serif;
  --mono: 'Space Mono', 'Courier New', monospace;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* The ribbon under MENU on the cover of the carte: six flat colours, drawn. */
  --cinta: linear-gradient(90deg,
      var(--naranja) 0 16.666%, var(--turquesa) 0 33.333%, var(--azul) 0 50%,
      var(--amarillo) 0 66.666%, var(--magenta) 0 83.333%, var(--verde) 0 100%);

  /* The corner cut every photograph and plate carries: two opposite corners
     taken off on the diagonal, like a facet of the bull. */
  --cut: 30px;
  --facet: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
  /* The button: the same cut, smaller */
  --facet-sm: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));

  /* A faint square grid: the tooth of the printed paper */
  --weave: repeating-linear-gradient(90deg,
      rgba(19, 19, 19, 0.018) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(0deg,
      rgba(19, 19, 19, 0.018) 0 1px, transparent 1px 46px);
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--weave), var(--blanco);
  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(--amarillo); color: var(--ink); }

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

/* ---------- Typography ---------- */
/* The wordmark is geometric caps, so the headings are: Unbounded, tight,
   uppercase, with the weight doing the work rather than size. */
h1, h2, h3 {
  font-family: var(--display);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.08;
}

/* The eyebrow is set by the ticket printer: monospaced small caps, a coloured
   square in front of it the way the printed carte marks every section, and a
   hairline running out to the end of the measure. */
.kicker {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--mono); font-weight: 400;
  font-size: 11.5px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--magenta); line-height: 1.4;
}
.kicker::before { content: ''; flex: none; width: 11px; height: 11px; background: var(--naranja); }
.kicker::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.section-head.center .kicker { justify-content: center; }
.section-head.center .kicker::after { flex: 0 0 48px; }

.section-title {
  font-family: var(--display);
  font-size: clamp(25px, 3.1vw, 42px);
  margin: 18px 0 0;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  font-weight: 700;
  max-width: 22ch;
}
.section-head.center .section-title { max-width: none; }
.section-sub { color: var(--para); max-width: 58ch; font-size: 16.5px; margin-top: 18px; }
.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 facet of the bull: a flat colour block with two opposite
   corners cut on the diagonal, the label set by the ticket printer. Orange is
   the first voice, black the second; hover swaps them. */
.btn {
  display: inline-block;
  position: relative;
  z-index: 0;
  padding: 17px 38px;
  border: 0;
  border-radius: 0;
  clip-path: var(--facet-sm);
  background: var(--naranja);
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  text-indent: 0.16em;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  transition: background 0.4s var(--ease), color 0.4s var(--ease),
    transform 0.4s var(--ease);
}
.btn:hover {
  background: var(--ink);
  color: var(--blanco);
  transform: translateY(-2px);
}

.btn.solid { background: var(--ink); color: var(--blanco); }
.btn.solid:hover { background: var(--naranja); color: var(--ink); }

/* Drawn, not filled. The border keeps square corners: a cut corner with a
   line around it leaves a gap where the line stops. */
.btn.ghost {
  background: transparent; color: var(--ink);
  clip-path: none;
  box-shadow: inset 0 0 0 1.5px var(--ink);
}
.btn.ghost:hover { background: var(--ink); color: var(--blanco); box-shadow: none; }

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

.btn.danger { background: var(--err); color: #fff; }
.btn.danger:hover { background: var(--ink); color: var(--blanco); }

/* ---------- The bands ---------- */
/* The page is one sheet of paper. Bands divide with a hairline; two of them
   are night, and those close under the six-colour ribbon. The corners of the
   sheet carry the two-tone triangles the printed carte pins in its corners. */
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; }

/* The corner triangles: a large one and a smaller one of another colour
   tucked into it, in the four corners, exactly as printed. Drawn as
   backgrounds so nothing is added to the markup. */
.esquinas {
  background-image:
    linear-gradient(135deg, var(--azul) 50%, transparent 50%),
    linear-gradient(135deg, var(--turquesa) 50%, transparent 50%),
    linear-gradient(225deg, var(--magenta) 50%, transparent 50%),
    linear-gradient(225deg, var(--amarillo) 50%, transparent 50%),
    linear-gradient(45deg, var(--azul) 50%, transparent 50%),
    linear-gradient(45deg, var(--verde) 50%, transparent 50%),
    linear-gradient(315deg, var(--naranja) 50%, transparent 50%),
    linear-gradient(315deg, var(--amarillo) 50%, transparent 50%);
  background-repeat: no-repeat;
  background-size: 48px 48px, 24px 24px, 48px 48px, 24px 24px, 48px 48px, 24px 24px, 48px 48px, 24px 24px;
  background-position:
    22px 22px, 46px 46px,
    calc(100% - 22px) 22px, calc(100% - 46px) 46px,
    22px calc(100% - 22px), 46px calc(100% - 46px),
    calc(100% - 22px) calc(100% - 22px), calc(100% - 46px) calc(100% - 46px);
}
@media (max-width: 900px) { .esquinas { background-size: 30px 30px, 15px 15px, 30px 30px, 15px 15px, 30px 30px, 15px 15px, 30px 30px, 15px 15px;
  background-position: 14px 14px, 29px 29px, calc(100% - 14px) 14px, calc(100% - 29px) 29px, 14px calc(100% - 14px), 29px calc(100% - 29px), calc(100% - 14px) calc(100% - 14px), calc(100% - 29px) calc(100% - 29px); } }

#about { background-color: var(--blanco); }
#spaces { background-color: var(--blanco); }
.programme-section { background-color: var(--blanco); }
.gallery-section { background-color: var(--blanco-2); }

/* ---------- Paper ---------- */
/* The carte and the hours are printed things, so they sit on the white of the
   printed menu, brighter than the page, with the corner triangles pinned. */
section.paper {
  background-color: var(--paper);
  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(--magenta); }
.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 .menu-cat h3 { color: var(--ink-on-paper); }
.paper .menu-item .mi-name { color: var(--ink-on-paper); }
.paper .menu-item .mi-price { color: var(--azul-ink); }
.paper .menu-item .mi-dots { border-bottom-color: rgba(19, 19, 19, 0.26); }
.paper .menu-item-desc { color: var(--para-on-paper); opacity: 0.9; }
.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 .dots { border-bottom-color: rgba(19, 19, 19, 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(--azul-deep); }
.paper .contact-lines a:hover { color: var(--naranja-deep); }
.paper #map { border-color: var(--rule-on-paper); }
.paper ::selection { background: var(--amarillo); color: var(--ink); }

/* ---------- Nav ---------- */
/* Over the hero the bar is glass over the film; once the page scrolls it is
   the white of the page, and the type flips to ink. */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  padding: 18px 0;
  transition: background 0.5s, padding 0.5s, box-shadow 0.5s;
}
.nav.scrolled {
  background: rgba(251, 249, 243, 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(19, 19, 19, 0.07);
}
.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 bull's head, on its own. Over the film a soft shadow lifts it off the
   picture; on the white bar it stands on its own. */
.nav-logo img {
  height: 54px; width: auto; flex: none;
  filter: drop-shadow(0 2px 10px rgba(8, 8, 12, 0.55));
  transition: height 0.4s var(--ease), filter 0.4s var(--ease);
}
.nav.scrolled .nav-logo img { height: 44px; 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: 14px; align-items: center; justify-content: flex-end; grid-column: 3; grid-row: 1; list-style: none; }
.nav-links a, .nav-right a {
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  text-indent: 0.12em;
  color: #fbf9f3;
  opacity: 0.95;
  text-shadow: 0 1px 10px rgba(8, 8, 12, 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 ribbon in miniature: the underline is the six colours */
.nav-links a::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 2px; height: 3px;
  background: var(--cinta);
  transform: scaleX(0); transform-origin: right;
  transition: transform 0.5s var(--ease);
}
.nav-links a:hover { opacity: 1; }
.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(251, 249, 243, 0.6); padding: 10px 20px !important; }
.nav-cta:hover { background: var(--naranja); border-color: var(--naranja); color: var(--ink) !important; }
.nav.scrolled .nav-cta { border-color: var(--ink); }
.nav.scrolled .nav-cta:hover { background: var(--naranja); border-color: var(--naranja); color: var(--ink) !important; }
.nav-cta::after { display: none; }

/* Two-state switch with a square orange knob sliding under the active language */
.lang-switch {
  position: relative; display: flex; padding: 3px;
  border: 1px solid rgba(251, 249, 243, 0.35);
}
.nav.scrolled .lang-switch { border-color: var(--line); }
.lang-switch::before {
  content: ''; position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px);
  background: var(--naranja);
  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: #fbf9f3;
  font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; padding: 6px 13px;
  transition: color 0.35s;
}
.nav.scrolled .lang-switch button { color: var(--para); }
.lang-switch button.active, .nav.scrolled .lang-switch button.active { color: var(--ink); }

.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; background: #fbf9f3; 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(--noche-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: the film is the bar and the bar is the point. A pool of shade
   under the words and a dark foot the next band arrives out of. */
.hero-bg::after {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(52% 46% at 50% 50%, rgba(8, 8, 12, 0.6), rgba(8, 8, 12, 0.26) 62%, transparent 82%),
    linear-gradient(180deg, rgba(8, 8, 12, 0.46) 0%, rgba(8, 8, 12, 0.06) 40%, rgba(10, 10, 14, 0.62) 100%);
}
/* The ribbon closes the hero the way it closes the cover of the carte */
.hero::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 8px; z-index: 3;
  background: var(--cinta);
}
/* Three facets of the bull, cut loose and drifting over the film. Flat
   colour, slow, and gone on a phone where they would cover the words. */
.hero-facets { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.hero-facets i {
  position: absolute; display: block; opacity: 0.86;
  animation: facetDrift 16s ease-in-out infinite alternate;
}
.hero-facets i:nth-child(1) { left: 7%; top: 18%; width: 150px; height: 150px; background: var(--naranja); clip-path: polygon(0 0, 100% 0, 0 100%); }
.hero-facets i:nth-child(2) { right: 9%; top: 24%; width: 120px; height: 120px; background: var(--turquesa); clip-path: polygon(100% 0, 100% 100%, 0 100%); animation-delay: -5s; animation-duration: 19s; }
.hero-facets i:nth-child(3) { left: 16%; bottom: 14%; width: 96px; height: 96px; background: var(--amarillo); clip-path: polygon(0 100%, 100% 100%, 100% 0); animation-delay: -9s; animation-duration: 22s; }
.hero-facets i:nth-child(4) { right: 15%; bottom: 20%; width: 132px; height: 132px; background: var(--magenta); clip-path: polygon(0 0, 100% 100%, 0 100%); animation-delay: -13s; animation-duration: 17s; }
@keyframes facetDrift {
  from { transform: translate3d(0, 0, 0) rotate(0deg); }
  to { transform: translate3d(28px, -34px, 0) rotate(9deg); }
}
@media (max-width: 900px) { .hero-facets i { transform: scale(0.55); opacity: 0.7; } .hero-facets i:nth-child(1), .hero-facets i:nth-child(4) { display: none; } }

.hero-content { position: relative; z-index: 2; padding: 0 24px; }
/* The line is set in the wordmark's own voice: heavy geometric caps, tight,
   white. It arrives as a wipe from the left, the way a facet is cut. */
.hero-script {
  font-family: var(--display);
  font-size: clamp(34px, 5.6vw, 84px);
  color: #fbf9f3;
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: -0.015em;
  max-width: 16ch;
  margin: 0 auto;
  text-shadow: 0 6px 46px rgba(8, 8, 12, 0.6);
}
.hero-tag {
  margin-top: 26px;
  font-family: var(--mono);
  color: var(--turquesa-lit);
  text-shadow: 0 2px 22px rgba(8, 8, 12, 0.8);
  font-size: clamp(11px, 1.15vw, 13.5px);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.34em;
  text-indent: 0.34em;
}
.hero-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 44px; }

.hero-content > * { opacity: 0; transform: translateY(22px); animation: heroIn 1.2s var(--ease) forwards; }
.hero-content > .hero-script { transform: none; clip-path: inset(0 100% 0 0); animation: heroTitleIn 1.5s var(--ease) forwards; }
.hero-content > *:nth-child(2) { animation-delay: 0.36s; }
.hero-content > *:nth-child(3) { animation-delay: 0.56s; }
.hero-content > *:nth-child(4) { animation-delay: 0.72s; }
@keyframes heroIn { to { opacity: 1; transform: none; } }
@keyframes heroTitleIn {
  from { opacity: 1; clip-path: inset(0 100% 0 0); }
  to { opacity: 1; clip-path: inset(0 -2% 0 0); }
}
@keyframes navItemIn { to { opacity: 1; transform: none; } }

/* The hours: the two facts people look for, five and one */
.hero-hours {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  margin-top: 36px;
  font-family: var(--mono); font-size: 12.5px; font-weight: 700;
  letter-spacing: 0.3em; text-indent: 0.3em;
  color: #fbf9f3;
  text-shadow: 0 2px 18px rgba(8, 8, 12, 0.85);
}
.hero-hours i { display: block; width: 54px; height: 3px; background: var(--cinta); }
@media (max-width: 700px) { .hero-hours { margin-top: 28px; letter-spacing: 0.22em; text-indent: 0.22em; } }

/* ---------- Reveal ---------- */
/* Things arrive the way a facet is cut: a wipe across, not a fade up. The
   negative inset keeps shadows and overhangs outside the box visible once
   the wipe is done. */
.reveal { opacity: 0.001; clip-path: inset(0 100% 0 0); transition: clip-path 1s var(--ease), opacity 0.6s var(--ease); }
.reveal.visible { opacity: 1; clip-path: inset(-80px -80px -80px -80px); }
.reveal-left { opacity: 0.001; clip-path: inset(100% -80px -80px -80px); transform: translateY(18px); transition: clip-path 1.1s var(--ease), transform 1.1s var(--ease), opacity 0.6s var(--ease); }
.reveal-left.visible { opacity: 1; clip-path: inset(-80px -80px -80px -80px); 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 ---------- */
/* A photograph is a facet: two opposite corners cut on the diagonal, and a
   small coloured triangle pinned in the top-left corner the way the printed
   carte pins one in every page corner. No frame, no shadow: flat, like the
   bull. Hover pushes the picture in, never draws on it. */
.img-frame {
  position: relative; overflow: hidden;
  clip-path: var(--facet);
  background: var(--ink);
  --pin: var(--naranja);
}
.img-frame::before {
  content: ''; position: absolute; left: 0; top: 0; z-index: 2;
  width: 58px; height: 58px;
  background: linear-gradient(135deg, var(--pin) 50%, transparent 50%);
  transition: width 0.6s var(--ease), height 0.6s var(--ease);
}
.img-frame img { transition: transform 1.4s var(--ease); }
.img-frame:hover::before { width: 76px; height: 76px; }
.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: 96px; }
.about-images .img-main { width: 78%; }
.about-images .img-accent {
  position: absolute; right: 0; bottom: 0; width: 52%;
  --pin: var(--turquesa);
}
.about-text p { color: var(--para); margin: 26px 0; font-size: 16.5px; }
/* The tagline under the story: three words the house is, in the printer's voice */
.about-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.about-tags span {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink); padding: 8px 14px; border: 1.5px solid var(--ink);
}
.about-tags span:nth-child(1) { border-color: var(--naranja); }
.about-tags span:nth-child(2) { border-color: var(--turquesa); }
.about-tags span:nth-child(3) { border-color: var(--magenta); }
.about-tags span:nth-child(4) { border-color: var(--azul); }

/* ---------- Menu ---------- */
.menu-section { background: var(--paper); }
.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: 0;
  padding: 13px 36px;
  font-family: var(--mono); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.14em; text-indent: 0.14em; font-size: 12px;
  transition: 0.4s var(--ease);
}
.menu-tabs button.active { border-color: var(--ink); color: var(--blanco); 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; --cat: var(--naranja); }
/* Six colours, cycling: the printed carte marks every section with a
   coloured square before its title, and never twice the same in a row. */
.menu-cat:nth-child(6n+2) { --cat: var(--turquesa); }
.menu-cat:nth-child(6n+3) { --cat: var(--azul); }
.menu-cat:nth-child(6n+4) { --cat: var(--amarillo); }
.menu-cat:nth-child(6n+5) { --cat: var(--magenta); }
.menu-cat:nth-child(6n+6) { --cat: var(--verde); }
/* The heading exactly as printed: square, name, rule running out. */
.cat-head {
  text-align: left;
  padding-bottom: 0;
  margin-bottom: 14px;
  border-bottom: 0;
}
.menu-cat h3 {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--display);
  font-size: 13.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink);
  line-height: 1.4;
  margin: 0;
}
.menu-cat h3::before { content: ''; flex: none; width: 13px; height: 20px; background: var(--cat); }
.menu-cat h3::after { content: ''; flex: 1; height: 1px; background: var(--line); min-width: 24px; }
.menu-cat-sub {
  font-family: var(--sans); font-style: italic;
  color: var(--para);
  font-size: 14px;
  line-height: 1.45;
  margin: 8px 0 0 27px;
}
.menu-item { display: flex; align-items: baseline; gap: 10px; padding: 7px 0; }
.menu-item .mi-name { font-family: var(--sans); 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(74, 74, 82, 0.4); transform: translateY(-5px); }
.menu-item .mi-price { font-family: var(--mono); font-weight: 700; color: var(--azul-ink); font-size: 13.5px; white-space: nowrap; letter-spacing: 0.02em; }
.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(--mono); font-weight: 400; font-style: normal;
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--para); opacity: 0.75;
}

/* ---------- The signature band ---------- */
/* The bar after dark: the one band on the page that goes full night, because
   the beef of Beni Mellal on the charcoal and the oysters of Dakhla deserve
   the stage. The ribbon closes its top edge, big facets of the six colours
   sit cut into the dark, and the list arrives on a white plate. */
.formule {
  background-color: var(--noche);
  background-image:
    linear-gradient(135deg, var(--magenta) 50%, transparent 50%),
    linear-gradient(225deg, var(--azul) 50%, transparent 50%),
    linear-gradient(45deg, var(--turquesa) 50%, transparent 50%),
    linear-gradient(315deg, var(--naranja) 50%, transparent 50%);
  background-repeat: no-repeat;
  background-size: 260px 260px, 200px 200px, 180px 180px, 240px 240px;
  background-position: -60px -40px, calc(100% + 40px) 60px, -30px calc(100% + 30px), calc(100% + 60px) calc(100% + 40px);
  color: var(--on-dusk-dim);
}
.formule::before {
  height: 8px;
  background: var(--cinta) !important;
  top: -1px;
}
.formule .kicker { color: var(--turquesa-lit); }
.formule .kicker::before { background: var(--amarillo); }
.formule .kicker::after { background: rgba(251, 249, 243, 0.25); }
.formule .section-title { color: #fbf9f3; }
.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(30px, 3.5vw, 50px); }
.formule-copy > p { color: rgba(251, 249, 243, 0.82); margin-bottom: 26px; max-width: 44ch; }
.formule-time {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--amarillo); margin: 18px 0 !important;
}
.formule-copy .btn { margin-top: 8px; }
/* The plate: white, cut on two corners, a coloured square before every line */
.formule-list {
  position: relative;
  background: var(--card);
  clip-path: var(--facet);
  color: var(--para);
  padding: clamp(30px, 3.4vw, 46px) clamp(26px, 3vw, 42px);
}
.fm-row { display: flex; align-items: baseline; gap: 12px; padding: 9px 0; --cat: var(--naranja); }
.fm-row:nth-child(6n+2) { --cat: var(--turquesa); }
.fm-row:nth-child(6n+3) { --cat: var(--azul); }
.fm-row:nth-child(6n+4) { --cat: var(--amarillo); }
.fm-row:nth-child(6n+5) { --cat: var(--magenta); }
.fm-row:nth-child(6n+6) { --cat: var(--verde); }
.fm-row::before { content: ''; flex: none; width: 9px; height: 9px; background: var(--cat); transform: translateY(-2px); }
.fm-name { font-family: var(--sans); font-weight: 600; font-size: 16.5px; color: var(--ink); }
.fm-dots { flex: 1; border-bottom: 1px dotted rgba(74, 74, 82, 0.38); transform: translateY(-4px); }
.fm-price { font-family: var(--mono); font-weight: 700; font-size: 13.5px; color: var(--azul-ink); white-space: nowrap; }
.formule-list .menu-item-desc { color: var(--para); }
@media (max-width: 900px) { .formule-inner { grid-template-columns: 1fr; } .formule { background-size: 160px 160px, 120px 120px, 110px 110px, 150px 150px; } }

/* ---------- La semaine ---------- */
/* Seven days, read straight off the opening hours the owner keeps in the
   panel. Seven tickets in a row, each with a coloured head, the night the
   page is looked at printed in ink. */
.programme-section { background: var(--blanco); }
.programme-grid {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 8px;
}
.prog-day {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line-soft);
  padding: 30px 14px 30px;
  text-align: center;
  transition: transform 0.5s var(--ease), background 0.5s var(--ease);
  --cat: var(--naranja);
}
.prog-day:nth-child(7n+2) { --cat: var(--turquesa); }
.prog-day:nth-child(7n+3) { --cat: var(--azul); }
.prog-day:nth-child(7n+4) { --cat: var(--amarillo); }
.prog-day:nth-child(7n+5) { --cat: var(--magenta); }
.prog-day:nth-child(7n+6) { --cat: var(--verde); }
.prog-day:nth-child(7n+7) { --cat: var(--naranja); }
.prog-day::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--cat);
}
.prog-day:hover { transform: translateY(-4px); }
.prog-day.today { background: var(--ink); border-color: var(--ink); }
.prog-day.today .prog-name { color: #fbf9f3; }
.prog-day.today .prog-hours { color: var(--on-dusk-dim); }
.prog-day.today .prog-note { color: var(--turquesa-lit); }
.prog-name {
  display: block; font-family: var(--display); font-weight: 700; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ink);
}
.prog-hours { display: block; font-family: var(--mono); font-size: 12px; color: var(--para); opacity: 0.8; margin-top: 8px; letter-spacing: 0.04em; }
.prog-note {
  display: block; font-family: var(--sans); font-size: 14.5px; line-height: 1.35; font-weight: 500;
  color: var(--azul-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); } }
@media (max-width: 620px) { .programme-grid { grid-template-columns: repeat(2, 1fr); } .prog-note { font-size: 14px; } }

/* ---------- Spaces ---------- */
.spaces-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
/* Each room is a facet: the photograph cut on two corners, a coloured
   triangle pinned top-left, the name set in the wordmark's voice. */
.space-card {
  position: relative; overflow: hidden; aspect-ratio: 3 / 4.2;
  clip-path: var(--facet);
  background: var(--ink);
  --pin: var(--naranja);
}
.space-card:nth-child(2) { --pin: var(--turquesa); }
.space-card:nth-child(3) { --pin: var(--magenta); }
.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(135deg, var(--pin) 0 40px, transparent 40px) no-repeat,
    linear-gradient(180deg, transparent 48%, rgba(10, 10, 14, 0.9));
}
.space-card figcaption {
  position: absolute; left: 0; right: 0; bottom: 28px; z-index: 4;
  text-align: center;
  font-family: var(--display); font-weight: 700;
  font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase; color: #fbf9f3;
  text-shadow: 0 1px 12px rgba(8, 8, 12, 0.6);
}
.space-card figcaption small:empty { display: none; }
.space-card figcaption small {
  display: block;
  font-family: var(--mono); font-weight: 400;
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--turquesa-lit); margin-top: 8px; line-height: 1.5;
}

/* ---------- Gallery ---------- */
/* Six pictures from the house's own feed, which are portrait, so the cells
   are portrait: the lead takes four, the rest one each, nothing is cropped
   into a letterbox. Each is a facet. */
.gal-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: calc((min(1200px, 90vw) - 28px) / 3 * 1.25);
  gap: 14px;
}
.gal-grid figure {
  position: relative; overflow: hidden; margin: 0; cursor: zoom-in;
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px));
  background: var(--ink);
}
.gal-grid figure:nth-child(1) { grid-column: span 2; grid-row: span 2; clip-path: var(--facet); }
.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.1) brightness(1.03); }
@media (max-width: 760px) {
  .gal-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: calc(45vw * 1.25); gap: 10px; }
  .gal-grid figure:nth-child(1) { grid-column: span 2; grid-row: span 2; }
}

.lightbox {
  position: fixed; inset: 0; z-index: 90; background: rgba(10, 10, 14, 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: 1.5px solid var(--dusk-line); color: var(--on-dusk);
  width: 48px; height: 48px; font-size: 18px; transition: 0.35s; display: grid; place-items: center;
}
.lightbox button:hover { border-color: var(--naranja); color: var(--naranja); }
.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 { display: grid; gap: 3px; }
.hours-list .day { font-family: var(--display); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink); }
.hours-list .day-note { font-family: var(--sans); font-size: 14px; line-height: 1.3; color: var(--azul-deep); font-weight: 500; }
.hours-list .dots { flex: 1; border-bottom: 1px dotted rgba(74, 74, 82, 0.32); transform: translateY(-4px); }
.hours-list .time { font-family: var(--mono); font-size: 13px; color: var(--ink-soft); letter-spacing: 0.04em; }
.hours-list .closed { font-family: var(--mono); font-size: 12px; color: var(--err); text-transform: uppercase; letter-spacing: 0.1em; }
.contact-lines { margin-top: 30px; display: grid; gap: 12px; color: var(--para); font-size: 15px; }
.contact-lines a:hover { color: var(--naranja-deep); }
.contact-lines strong { color: var(--azul-deep); font-weight: 500; }
#map { min-height: 440px; height: 100%; border: 1px solid var(--line); z-index: 1; clip-path: var(--facet); }
#map .leaflet-tile-pane { filter: saturate(0.82) contrast(0.98); }
#map .leaflet-control-attribution { background: rgba(251, 249, 243, 0.85); color: var(--para); }
#map .leaflet-control-attribution a { color: var(--azul-deep); }
#map .leaflet-bar a { background: var(--card); color: var(--ink); border-bottom-color: var(--line); }
#map .leaflet-bar a:hover { background: var(--blanco-2); color: var(--naranja-deep); }
/* The pin is a facet: an orange square on its point, pulsing a ring */
.map-pin { position: relative; width: 22px; height: 22px; }
.map-pin::before {
  content: ''; position: absolute; inset: 2px;
  background: var(--naranja); border: 3px solid var(--card); transform: rotate(45deg);
  box-shadow: 0 2px 12px rgba(19, 19, 19, 0.4);
}
.map-pin::after {
  content: ''; position: absolute; inset: -12px;
  border: 2px solid var(--naranja); transform: rotate(45deg);
  animation: pin-pulse 2.4s ease-out infinite;
}
@keyframes pin-pulse {
  from { transform: rotate(45deg) scale(0.5); opacity: 0.9; }
  to { transform: rotate(45deg) scale(1.3); opacity: 0; }
}
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--card); color: var(--ink); border-radius: 0; }
.leaflet-popup-content a { color: var(--azul-deep); font-weight: 500; }

/* ---------- Reservation ---------- */
/* The terrace after dark under a night veil, and the form on a white plate
   cut on two corners in the middle of it. */
.reserve-section {
  background:
    linear-gradient(rgba(10, 10, 14, 0.66), rgba(10, 10, 14, 0.82)),
    url('../images/space-restaurant.jpg') center/cover fixed;
}
.reserve-panel {
  position: relative;
  max-width: 780px; margin: 0 auto;
  background: var(--card);
  clip-path: var(--facet);
  color: var(--para);
  padding: clamp(36px, 5vw, 68px);
}
.reserve-panel > * { position: relative; z-index: 1; }
.reserve-panel .kicker { color: var(--magenta); }
.reserve-panel .section-title { color: var(--ink); }
.reserve-panel .section-sub, .reserve-panel .form-note { color: var(--para); }
.reserve-panel .prefill-note { color: var(--azul-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(--mono); font-weight: 400; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.18em; color: var(--azul-deep); }
.form-field input, .form-field select {
  background: var(--blanco);
  border: 1.5px solid var(--line);
  color: var(--ink);
  padding: 15px 16px;
  font-family: var(--sans); font-size: 15px; font-weight: 400; letter-spacing: 0.01em;
  transition: border-color 0.35s, box-shadow 0.35s;
  width: 100%; border-radius: 0; appearance: none;
}
.form-field input:focus, .form-field select:focus { outline: none; border-color: var(--naranja); box-shadow: inset 0 0 0 1px var(--naranja); }
.form-field input::placeholder { color: rgba(74, 74, 82, 0.5); }
.form-field select {
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 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(74, 74, 82, 0.7); letter-spacing: 0.02em; }
.prefill-note { color: var(--azul-deep); font-size: 13px; margin-top: 12px; }

/* ---------- Footer ---------- */
/* The night the evening ends on, closed under the ribbon. The logo is a
   black wordmark, so it sits on a white plate, like the sticker on the door. */
footer {
  background: var(--noche-deep);
  color: var(--on-dusk-dim);
  padding: 90px 0 34px;
}
footer::before {
  height: 8px;
  background: var(--cinta);
}
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 46px; margin-bottom: 54px; }
.footer-grid h4 {
  font-family: var(--display); font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  margin-bottom: 20px; color: var(--naranja);
}
.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(--amarillo); }
.footer-grid ul { display: grid; gap: 12px; }
.footer-logo {
  height: 84px; width: auto; margin-bottom: 22px;
  background: var(--card); padding: 12px 18px;
  clip-path: var(--facet-sm);
}
.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;
  transition: transform 0.35s var(--ease);
}
.socials a img { width: 100%; height: 100%; object-fit: contain; display: block; }
.socials a:hover { transform: translateY(-3px); }
.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-family: var(--mono); font-size: 12px; letter-spacing: 0.04em;
}
.footer-bottom a:hover { color: var(--amarillo); }

/* ---------- 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(8, 8, 12, 0.62) 0%, rgba(8, 8, 12, 0.42) 45%, rgba(10, 10, 14, 0.8) 100%);
}
.page-hero::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 8px; z-index: 3;
  background: var(--cinta);
}
.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(32px, 4.6vw, 58px); position: relative; z-index: 2; letter-spacing: -0.01em; text-transform: uppercase; color: #fbf9f3; text-shadow: 0 6px 40px rgba(8, 8, 12, 0.6); }
.page-hero .kicker { position: relative; z-index: 2; color: var(--turquesa-lit); justify-content: center; }
.page-hero .kicker::before { background: var(--amarillo); }
.page-hero .kicker::after { flex: 0 0 48px; background: rgba(251, 249, 243, 0.3); }
.legal { max-width: 820px; margin: 0 auto; }
.legal h1 { letter-spacing: -0.01em; }
.legal h2 { font-family: var(--mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.2em; margin: 48px 0 16px; color: var(--magenta); font-weight: 700; }
.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: 0;
  background: var(--card); color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: 0 18px 50px rgba(19, 19, 19, 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, 249, 243, 0.5); border-radius: 0;
  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(--azul); border-color: var(--azul); color: #fbf9f3 !important; }
.nav-auth.signed-in { border-color: var(--azul); color: var(--azul) !important; }
.nav.scrolled .nav-auth.signed-in { color: var(--azul-deep) !important; border-color: var(--azul-deep); }
.nav-auth.signed-in:hover { background: var(--azul); border-color: var(--azul); color: #fbf9f3 !important; }

.page-account { background: var(--noche-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(10, 10, 14, .66), rgba(10, 10, 14, .8) 55%, rgba(10, 10, 14, .92));
}
.page-account .nav {
  background: rgba(251, 249, 243, 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: #fbf9f3; }
.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(10, 10, 14, .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: 0; padding: 34px 36px; text-align: center;
  box-shadow: 0 34px 80px rgba(8, 8, 12, 0.45);
}
.auth-card::after { content: ''; position: absolute; inset: 9px; pointer-events: none; border: 1px solid rgba(31, 86, 165, 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: 400; font-size: 10px; text-transform: uppercase; letter-spacing: 0.18em; font-family: var(--mono);
  color: var(--azul-deep); margin-top: 8px;
}
.auth-form input {
  width: 100%; background: var(--blanco); border: 1.5px solid var(--line-soft);
  border-radius: 0; padding: 12px 13px; color: var(--ink);
  font-family: var(--sans); font-size: 14.5px;
}
.auth-form input:focus { outline: none; border-color: var(--azul); }
.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(--blanco); border: 1.5px solid var(--line-soft); border-radius: 0;
  color: var(--para); padding: 10px 6px; font-size: 13px; font-family: var(--sans); transition: .3s;
}
.gender-row button:hover { border-color: var(--azul); }
.gender-row button.active { border-color: var(--azul); background: var(--zest); color: var(--azul-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(--azul-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(--blanco); border: 1.5px solid var(--line-soft);
  border-radius: 0; padding: 12px 13px; color: var(--ink);
  font-family: var(--sans); font-size: 14.5px; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--azul-deep) 50%),
                    linear-gradient(135deg, var(--azul-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(--azul); }
.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(--azul-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(--azul); 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(--azul-deep); text-decoration: underline; white-space: nowrap; }
.forgot-link:hover { color: var(--ink); }
.birthday-note {
  font-size: 12px; color: var(--azul-deep); margin-top: 10px; text-align: center;
  background: var(--zest); border: 1px solid var(--line-soft); border-radius: 0; 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: 0; padding: 28px;
  box-shadow: 0 20px 50px rgba(8, 8, 12, 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), #f7c31c 62%, #d4551a); border: 0; }
.fidelity-card .kicker { display: block; margin-bottom: 8px; color: #131313; }
.fidelity-card b { font-family: var(--display); font-size: 56px; font-weight: 600; color: #fbf9f3; line-height: 1; }
.fidelity-card p { color: #2c2c30; font-size: 13px; margin-top: 12px; line-height: 20px; }
.fidelity-card.off b { color: #2c2c30; opacity: 0.6; }

.member-heading { font-family: var(--display); font-size: 24px; font-weight: 600; margin-bottom: 18px; color: #fbf9f3; }
.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: 0; padding: 17px 22px;
  box-shadow: 0 14px 36px rgba(8, 8, 12, 0.3);
}
.res-when { display: grid; min-width: 92px; }
.res-when b { font-family: var(--display); font-size: 20px; font-weight: 600; color: var(--azul-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(--azul-deep); border-color: rgba(31, 86, 165, 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 veil with one warm facet
   of magenta in it, the cards white with a coloured edge each. */
.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(10, 10, 14, .86), rgba(140, 22, 86, .48) 55%, rgba(10, 10, 14, .9));
}
.contact-band > .container { position: relative; z-index: 1; }
.contact-inner { text-align: center; max-width: 1080px; margin: 0 auto; }
.contact-inner .kicker { color: var(--turquesa-lit); }
.contact-inner .kicker::before { background: var(--amarillo); }
.contact-inner .kicker::after { background: rgba(251, 249, 243, 0.28); }
.contact-inner .section-title { font-size: clamp(34px, 4.6vw, 54px); color: #fbf9f3; }
.contact-lead { color: rgba(251, 249, 243, 0.85); max-width: 620px; margin: 24px auto 44px; line-height: 27px; }

.contact-cards { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-bottom: 40px; }
@media (max-width: 720px) { .contact-card { max-width: none; flex-basis: 100%; } }
.contact-card {
  flex: 1 1 232px; max-width: 300px;
  display: flex; align-items: center; gap: 15px; text-align: left; text-decoration: none;
  background: rgba(255, 255, 255, 0.96); border: 0;
  border-left: 6px solid var(--naranja);
  padding: 19px 21px;
  transition: transform .35s var(--ease);
}
.contact-card:nth-child(2) { border-left-color: var(--turquesa); }
.contact-card:nth-child(3) { border-left-color: var(--azul); }
.contact-card:nth-child(4) { border-left-color: var(--verde); }
.contact-card:nth-child(5) { border-left-color: var(--magenta); }
a.contact-card:hover { transform: translateY(-3px); }
.cc-icon {
  width: 42px; height: 42px; flex: none; display: grid; place-items: center;
  background: var(--blanco); border: 1px solid var(--line-soft);
}
.cc-icon svg { width: 16px; height: 16px; fill: var(--ink); }
.cc-body { display: grid; gap: 3px; min-width: 0; }
.cc-body small { font-family: var(--mono); font-weight: 400; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--azul-deep); }
.cc-body b { font-weight: 500; font-size: 13.5px; 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: #fbf9f3; box-shadow: inset 0 0 0 1.5px rgba(251, 249, 243, 0.55); }
.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: #fbf9f3; }
.deals-main .section-head .section-sub { color: rgba(251, 249, 243, 0.8); }
.deals-empty {
  background: var(--card); border: 1px solid var(--line-soft); border-radius: 0;
  padding: 44px 32px; text-align: center; color: var(--para); max-width: 580px; margin: 0 auto;
  box-shadow: 0 20px 50px rgba(8, 8, 12, 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: #7fd3cf; 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(31, 86, 165, .2); border-radius: 0;
  padding: 15px;
  box-shadow: 0 14px 36px rgba(8, 8, 12, 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, 8, 12, 0.4); }
.deal-card img { width: 74px; height: 74px; border-radius: 0; 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(--azul-deep); font-size: 18px; font-weight: 600; }
.deal-badge {
  position: absolute; top: 12px; right: 12px; background: var(--zest);
  color: var(--azul-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(--azul) !important; }
.nav.scrolled .nav-deals { color: var(--azul-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(--azul-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(--azul); }
.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(--blanco); 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: 0;
  transition: border-color 0.35s, color 0.35s;
}
.timepick-btn:hover, .timepick-btn.open { border-color: var(--azul); }
.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(--azul-deep);
  transition: transform 0.3s var(--ease);
}
.timepick-btn.open .tp-caret { transform: rotate(180deg); }
.timepick-btn svg { width: 16px; height: 16px; fill: var(--azul-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: 0;
  box-shadow: 0 20px 46px rgba(19, 19, 19, 0.25);
}
.timepick-panel[hidden] { display: none; }
.timepick-slot {
  background: var(--blanco); 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: 0;
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}
.timepick-slot:hover { background: var(--zest); color: var(--ink); border-color: var(--azul); }
.timepick-slot.on { background: var(--ink); color: var(--blanco); 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(--blanco); 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(--azul);
  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(--magenta-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: #fbf9f3; 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: #7fd3cf; }
@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(--magenta-deep); color: #fbf9f3; font-weight: 600;
  border-radius: 0; 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(--blanco);
    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(--azul); padding: 14px 30px !important; color: var(--azul-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: #fbf9f3; }
  .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-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
   bull's head in the middle does not. A white plate behind it, because the
   page runs white 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, 255, 255, 0.94); border: 1.5px solid var(--ink);
  box-shadow: 0 12px 34px rgba(19, 19, 19, 0.2);
}
.reserve-badge svg { position: absolute; inset: 0; animation: spin 14s linear infinite; }
.reserve-badge svg text {
  fill: var(--ink); font-family: var(--mono); font-weight: 700;
  font-size: 7.4px; letter-spacing: 0.1em; 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); } }

@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(--azul-deep); border-bottom-color: var(--azul); }
.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; }