/* Para Buch design system.
   Everything here is taken off the house itself rather than invented: the
   porcelain cream of the logo's disc, the coffee brown of its bowl and
   chopsticks, the mustard gold of the armchairs in the dining room, and one
   vivid voice — the chili red of a Sichuan broth — used the way the kitchen
   uses chili: sparingly, where it counts.

   One motif, used everywhere and owned by nobody else: steam. The logo
   breathes three curls of it over the bowl, so the hero breathes, the bands
   close under a drawn steam line, section notes are written in the brush of
   the wordmark, and the room cards are shaped like bowls. */

:root {
  --pedra: #faf6ef;        /* porcelain: the page ground */
  --pedra-2: #f1e9da;      /* a warmer porcelain, for the gallery band */
  --card: #fffdf8;         /* a clean plate: cards and panels */
  --ink: #2a211a;          /* coffee ink, off the logo's lettering */
  --ink-soft: #4a3d31;
  --para: #5d5347;         /* the paragraph voice; warm slate */
  --azul: #c8401f;         /* chili broth: the first voice */
  --azul-deep: #a83518;    /* the same chili where small type needs contrast */
  --azul-ink: #93300f;     /* prices at 15px on porcelain clear 4.5:1 here */
  --tram: #e0a63c;         /* armchair gold */
  --tram-deep: #8a6414;    /* the same gold where type must read on cream */
  --verde: #3f7d5c;        /* jade: the calm second voice */
  --verde-deep: #2c5940;
  --noite: #241a12;        /* coffee lacquer. The evening bands */
  --noite-deep: #170f09;   /* the deep lacquer the footer sits on */
  --zest: rgba(200, 64, 31, 0.07);
  --line: rgba(42, 33, 26, 0.16);
  --line-soft: rgba(42, 33, 26, 0.09);
  --on-dusk: #f6efdf;      /* what reads on the lacquer bands */
  --on-dusk-dim: #cbb9a4;
  --dusk-line: rgba(246, 239, 223, 0.18);
  --dusk-line-soft: rgba(246, 239, 223, 0.1);
  --ok: #2f7a52;
  --err: #b3403a;

  /* The two printed bands (the carte and the hours) sit on the cream of the
     logo's disc, steam-watermarked rather than photographed. */
  --paper: #f6efdd;
  --paper-2: #ede2c9;
  --ink-on-paper: #2a211a;
  --para-on-paper: #5f5244;
  --gold-on-paper: #a83518;
  --rule-on-paper: rgba(42, 33, 26, 0.18);

  /* Light. One wash per band, each anchored somewhere different: a patch of
     armchair gold where the sun gets in, an ember of chili, a breath of jade. */
  --sun-tr: radial-gradient(70% 55% at 88% 0%, rgba(200, 64, 31, 0.06), transparent 70%);
  --sun-tl: radial-gradient(70% 55% at 12% 0%, rgba(224, 166, 60, 0.13), transparent 70%);
  --sun-bc: radial-gradient(85% 60% at 50% 100%, rgba(224, 166, 60, 0.11), transparent 72%);
  --verde-tl: radial-gradient(70% 55% at 8% 0%, rgba(63, 125, 92, 0.07), transparent 70%);

  --display: 'Bricolage Grotesque', 'Trebuchet MS', sans-serif;
  --sans: 'Instrument Sans', 'Segoe UI', system-ui, sans-serif;
  /* Kaushan is the brush the wordmark is painted with. The note on the
     programme strip, the note beside the hours, the line under the formula.
     It is never used inside a heading. */
  --script: 'Kaushan Script', 'Segoe Script', cursive;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* A drawn line of steam: three brush curls rising, repeated the width of
     the band. It closes the signature band and the footer the way the three
     curls rise off the bowl in the logo. */
  --steam-strip: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 10'%3E%3Cpath d='M6 9c3-2 3-4 0-6M26 9c-3-2-3-4 0-6M16 8c2.4-1.6 2.4-3.2 0-4.8' fill='none' stroke='%23e0a63c' stroke-width='1.6' stroke-linecap='round'/%3E%3Cpath d='M66 9c3-2 3-4 0-6M86 9c-3-2-3-4 0-6M76 8c2.4-1.6 2.4-3.2 0-4.8' fill='none' stroke='%23c8401f' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");

  /* The joints of a whitewashed wall: a faint square grid both ways, at an
     alpha the eye reads as texture rather than lines. */
  --weave: repeating-linear-gradient(90deg,
      rgba(42, 33, 26, 0.02) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(0deg,
      rgba(42, 33, 26, 0.02) 0 1px, transparent 1px 46px);
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--weave), var(--pedra);
  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(--azul); color: #fff; }

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

/* ---------- Typography ---------- */
/* The wordmark is geometric caps with an arch for an A, so every heading is
   set the way the printed carte sets its own: Josefin's compass-drawn caps,
   letterspaced, in cobalt ink. */
h1, h2, h3 {
  font-family: var(--display);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.1;
}

/* 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. */
.kicker {
  display: flex; align-items: center; gap: 20px;
  font-family: var(--sans); font-weight: 600;
  font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--azul-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-size: clamp(30px, 3.9vw, 52px);
  margin: 22px 0 0;
  letter-spacing: -0.015em;
  font-weight: 700;
  max-width: 24ch;
}
.section-head.center .section-title { max-width: none; }
.section-sub { color: var(--para); max-width: 58ch; font-size: 16px; margin-top: 20px; }
.section-head.center .section-sub { max-width: 66ch; }

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

/* ---------- Layout ---------- */
.container { width: min(1200px, 90vw); margin: 0 auto; }
section { padding: clamp(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 paper lantern: fully round, with a second line drawn just
   inside the rim the way the logo's disc is rimmed twice. The solid one is
   the chili of the house broth. ::after draws the inner rim so the label
   never fights a border. */
.btn {
  display: inline-block;
  position: relative;
  z-index: 0;
  padding: 17px 42px;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: #f8f1e2;
  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(248, 241, 226, 0.4);
  border-radius: 999px;
  transition: border-color 0.4s var(--ease);
}
.btn:hover {
  background: var(--azul);
  color: #fff7ec;
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(70, 30, 12, 0.25);
}
.btn:hover::after { border-color: rgba(255, 247, 236, 0.45); }

.btn.solid { background: var(--azul); color: #fff7ec; }
.btn.solid::after { border-color: rgba(255, 247, 236, 0.45); }
.btn.solid:hover { background: var(--ink); color: var(--pedra); }
.btn.solid:hover::after { border-color: rgba(248, 241, 226, 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(--pedra); 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(--pedra); }

/* ---------- 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 night-glaze blue, and they close under
   a strip of drawn tiles. */
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(--verde-tl); }
.programme-section { background-image: var(--sun-bc); }
.gallery-section { background: var(--pedra-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(42, 33, 26, 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(42, 33, 26, 0.24); }
.paper .hours-list .time { color: var(--para-on-paper); }
.paper .hours-list .closed { color: #9c3a34; }
.paper .contact-lines { color: var(--para-on-paper); }
.paper .contact-lines strong { color: var(--gold-on-paper); }
.paper .contact-lines a:hover { color: var(--ink-on-paper); }
.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(246, 239, 221, 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(246, 239, 221, 0.4); }
.paper .btn:hover { background: var(--azul-deep); color: #fff7ec; }
.paper .btn.solid { background: var(--azul); color: #fff7ec; }
.paper .btn.solid::after { border-color: rgba(255, 247, 236, 0.45); }
.paper .btn.solid:hover { background: var(--ink-on-paper); color: var(--paper); }
.paper .btn.solid:hover::after { border-color: rgba(246, 239, 221, 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(250, 246, 239, 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(58, 38, 20, 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(22, 12, 5, 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: #faf3e4;
  opacity: 0.95;
  text-shadow: 0 1px 10px rgba(22, 12, 5, 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 steam line in miniature: the underline is a run of brush curls */
.nav-links a::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0; height: 8px;
  background: no-repeat center / auto 100%
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 10'%3E%3Cpath d='M10 9c3-2 3-4 0-6M30 9c-3-2-3-4 0-6M50 9c3-2 3-4 0-6M70 9c-3-2-3-4 0-6' fill='none' stroke='%23e0a63c' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E");
  transform: scaleX(0); transform-origin: right;
  transition: transform 0.5s var(--ease);
}
.nav-links a:hover { opacity: 1; color: var(--azul); }
.nav.scrolled .nav-links a:hover { color: var(--azul-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(250, 243, 228, 0.6); padding: 10px 22px !important; border-radius: 10px; }
.nav-cta:hover { background: var(--azul); border-color: var(--azul); color: #fff7ec !important; }
.nav.scrolled .nav-cta { border-color: var(--line); }
.nav.scrolled .nav-cta:hover { background: var(--azul); border-color: var(--azul); color: #fff7ec !important; }
.nav-cta::after { display: none; }

/* Three-way switch with the knob sliding under the active language */
.lang-switch {
  position: relative; display: flex; padding: 3px;
  border: 1px solid rgba(250, 243, 228, 0.35); border-radius: 999px;
}
.nav.scrolled .lang-switch { border-color: var(--line-soft); }
.lang-switch::before {
  content: ''; position: absolute; top: 3px; bottom: 3px; left: 3px;
  width: calc((100% - 6px) / 3);
  background: var(--azul);
  border-radius: 999px;
  transition: transform 0.4s var(--ease);
}
.lang-switch[data-active='en']::before { transform: translateX(100%); }
.lang-switch[data-active='fr']::before { transform: translateX(200%); }
.lang-switch button {
  position: relative; z-index: 1; background: transparent; border: 0; color: #faf3e4;
  font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; padding: 6px 12px;
  transition: color 0.35s;
}
.nav.scrolled .lang-switch button { color: var(--para); }
.lang-switch button.active, .nav.scrolled .lang-switch button.active { color: #fff7ec; }

.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: #faf3e4; box-shadow: 0 1px 6px rgba(22, 12, 5, 0.55); transition: 0.4s var(--ease); }
.nav.scrolled .burger span { background: var(--ink); box-shadow: none; }
.nav.menu-open .burger span { background: var(--ink); box-shadow: none; }
.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(--noite-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(24, 13, 6, 0.62), rgba(24, 13, 6, 0.28) 62%, transparent 80%),
    linear-gradient(180deg, rgba(24, 13, 6, 0.42) 0%, rgba(24, 13, 6, 0.06) 40%, rgba(43, 22, 10, 0.55) 100%);
}
.hero-content { position: relative; z-index: 2; padding: 0 24px; }
/* The house name, painted in one breath like the brush of the wordmark.
   One orchestrated arrival, then nothing. */
.hero-script {
  font-family: var(--display);
  font-size: clamp(38px, 6vw, 86px);
  color: #faf3e4;
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.02em;
  max-width: 16ch;
  margin: 0 auto;
  text-shadow: 0 6px 46px rgba(26, 12, 4, 0.65);
}
.hero-tag {
  margin-top: 24px;
  font-family: var(--sans);
  color: #f0c983;
  text-shadow: 0 2px 22px rgba(22, 12, 5, 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: #f0c983;
  text-shadow: 0 2px 18px rgba(22, 12, 5, 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; } }

/* The hero breathes: three wisps of steam rising off the bottom of the
   frame, blurred to a suggestion. Decorative only, and switched off with
   reduced motion along with everything else. */
.hero-steam { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.hero-steam i {
  position: absolute; bottom: -18%;
  width: 26vmin; height: 60vmin;
  background: radial-gradient(50% 50% at 50% 50%, rgba(250, 243, 228, 0.16), transparent 70%);
  filter: blur(14px);
  border-radius: 50%;
  animation: steamRise 11s ease-in-out infinite;
}
.hero-steam i:nth-child(1) { left: 18%; animation-delay: 0s; }
.hero-steam i:nth-child(2) { left: 47%; animation-delay: 3.6s; width: 20vmin; }
.hero-steam i:nth-child(3) { left: 72%; animation-delay: 7.2s; width: 30vmin; }
@keyframes steamRise {
  0% { transform: translateY(24%) translateX(0) scale(0.8); opacity: 0; }
  30% { opacity: 0.8; }
  70% { opacity: 0.35; }
  100% { transform: translateY(-95%) translateX(6%) scale(1.15); opacity: 0; }
}

/* ---------- 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 sit on porcelain plates: a rim of ivory, a chili keyline just
   inside it the way the logo rims its disc, lifted on a soft shadow. Hover
   lifts the plate a little, it never draws on the picture. */
.img-frame {
  position: relative; overflow: hidden;
  border-radius: 26px;
  border: 7px solid var(--card);
  box-shadow: 0 18px 44px rgba(58, 38, 20, 0.16);
  transition: transform 0.7s var(--ease), box-shadow 0.7s var(--ease);
}
.img-frame::after {
  content: ''; position: absolute; inset: 7px; pointer-events: none;
  border: 1px solid rgba(200, 64, 31, 0.3); border-radius: 16px;
}
.img-frame img { transition: transform 1.4s var(--ease); border-radius: 19px; }
.img-frame:hover { transform: translateY(-4px); box-shadow: 0 26px 60px rgba(58, 38, 20, 0.22); }
.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(58, 38, 20, 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(--pedra); }
.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(--pedra); 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: 17px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em; text-indent: 0.18em;
  color: var(--ink);
  line-height: 1.5;
  margin: 0;
}
.menu-cat-sub {
  font-family: var(--sans);
  font-style: italic;
  color: var(--azul-deep);
  font-size: 13.5px;
  line-height: 1.45;
  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: 600; color: var(--ink); white-space: normal; overflow-wrap: anywhere; }
.menu-item .mi-dots { flex: 1; min-width: 18px; border-bottom: 1px dotted rgba(93, 83, 71, 0.4); transform: translateY(-5px); }
.menu-item .mi-price { font-family: var(--display); font-weight: 600; color: var(--azul-ink); font-size: 15px; white-space: nowrap; }
.menu-item-desc { color: var(--para); opacity: 0.82; font-size: 13.5px; margin: -4px 0 8px; max-width: 88%; }
.mi-price.mi-included {
  font-family: var(--sans); font-weight: 600; font-style: normal;
  font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--verde); opacity: 0.95;
}
.paper .mi-price.mi-included { color: var(--verde-deep); }
.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 broth at full boil: the one band on the page that is pure chili,
   because the formula is the house's signature and chili is the house's
   colour. A drawn line of steam closes its top edge, and the list sits on a
   plate of porcelain the way the tower of ingredients arrives. */
.formule {
  background:
    radial-gradient(90% 80% at 85% 10%, rgba(224, 166, 60, 0.22), transparent 60%),
    radial-gradient(80% 90% at 10% 100%, rgba(23, 15, 9, 0.6), transparent 70%),
    linear-gradient(112deg, #b23a1b 0%, #93300f 46%, #4a1c0c 100%);
}
.formule::before {
  height: 10px;
  background: var(--steam-strip) repeat-x center / auto 100% !important;
  top: -1px;
}
.formule .kicker { color: #f0c983; }
.formule .kicker::after { background: rgba(246, 239, 223, 0.25); }
.formule .section-title { color: #fdf6e9; }
.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(246, 239, 223, 0.88); margin-bottom: 26px; max-width: 44ch; }
.formule-time {
  font-family: var(--script); font-size: 24px;
  color: #f0c983; margin: 18px 0 !important;
}
.formule-copy .btn { margin-top: 8px; background: var(--tram); color: #2a1a08; }
.formule-copy .btn::after { border-color: rgba(42, 26, 8, 0.4); }
.formule-copy .btn:hover { background: var(--card); color: var(--ink); }
.formule-copy .btn:hover::after { border-color: rgba(42, 33, 26, 0.35); }
/* The board: an ivory tile with the glaze line inside it */
.formule-list {
  position: relative;
  background: var(--card);
  border-radius: 20px;
  box-shadow: 0 26px 60px rgba(20, 9, 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(200, 64, 31, 0.28);
  border-radius: 13px;
}
.fm-row { display: flex; align-items: baseline; gap: 12px; padding: 10px 0; }
.fm-name { font-family: var(--display); font-weight: 700; font-size: 17px; color: var(--ink); }
.fm-dots { flex: 1; border-bottom: 1px dotted rgba(93, 83, 71, 0.38); transform: translateY(-4px); }
.fm-price { font-family: var(--display); font-weight: 700; font-size: 16px; 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; } }

/* ---------- The weekly timetable ---------- */
/* Seven days, read straight off the opening hours the owner keeps in the
   panel. Set like a departure board, in the spirit of the house's name:
   para buch — steam up, wheels turn. */
.programme-section { background: var(--pedra); }
.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(58, 38, 20, 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(200, 64, 31, 0.06); }
.prog-day.today::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--azul);
}
.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: 17px; line-height: 1.35;
  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); 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: 15px; } }

/* ---------- Spaces ---------- */
.spaces-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
/* Each room is a bowl: flat rim on top, the curve underneath. */
.space-card {
  position: relative; overflow: hidden; aspect-ratio: 3 / 4.2;
  border-radius: 16px 16px 50% 50% / 16px 16px 22% 22%;
  box-shadow: 0 16px 40px rgba(58, 38, 20, 0.16);
}
.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(26, 15, 7, 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: #faf3e4;
  text-shadow: 0 1px 12px rgba(22, 12, 5, 0.6);
}
.space-card figcaption small:empty { display: none; }
.space-card figcaption small {
  display: block;
  font-family: var(--script); font-weight: 400;
  font-size: 15px; letter-spacing: 0.02em; text-indent: 0; text-transform: none;
  color: #f0c983; margin-top: 8px; line-height: 1.5;
}

/* ---------- Gallery ---------- */
/* Six pictures set like a wall of glazed tiles: 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(58, 38, 20, 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(20, 12, 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(--azul); color: var(--azul); }
.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: 14px; line-height: 1.3; color: var(--azul-deep); }
.hours-list .dots { flex: 1; border-bottom: 1px dotted rgba(93, 83, 71, 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(--sans); font-style: italic; }
.contact-lines { margin-top: 30px; display: grid; gap: 12px; color: var(--para); font-size: 15px; }
.contact-lines a:hover { color: var(--azul-deep); }
.contact-lines strong { color: var(--azul-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(250, 246, 239, 0.8); 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(--pedra-2); color: var(--azul-deep); }
.map-pin { position: relative; width: 22px; height: 22px; }
.map-pin::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: var(--azul); border: 3px solid var(--card);
  box-shadow: 0 2px 12px rgba(58, 38, 20, 0.4);
}
.map-pin::after {
  content: ''; position: absolute; inset: -12px; border-radius: 50%;
  border: 2px solid var(--azul);
  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(--azul-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(20, 12, 6, 0.8), rgba(18, 11, 5, 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(15, 9, 4, 0.5);
  padding: clamp(36px, 5vw, 68px);
}
.reserve-panel::after {
  content: ''; position: absolute; inset: 11px; pointer-events: none;
  border: 1px solid rgba(200, 64, 31, 0.22);
  border-radius: 3px;
}
.reserve-panel > * { position: relative; z-index: 1; }
.reserve-panel .kicker { color: var(--azul-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(--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(--sans); font-weight: 600; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.2em; text-indent: 0.2em; color: var(--azul-deep); }
.form-field input, .form-field select {
  background: var(--pedra);
  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(--azul); }
.form-field input::placeholder { color: rgba(93, 83, 71, 0.5); }
.form-field select {
  background-image: linear-gradient(45deg, transparent 50%, var(--azul-deep) 50%), linear-gradient(135deg, var(--azul-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(93, 83, 71, 0.7); letter-spacing: 0.02em; }
.prefill-note { color: var(--azul-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(178, 58, 27, 0.32), transparent 66%),
    var(--noite-deep);
  color: var(--on-dusk-dim);
  padding: 90px 0 34px;
}
footer::before {
  height: 10px;
  background: var(--steam-strip) repeat-x center / auto 100%;
}
.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(--azul);
}
.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(--azul); }
.footer-grid ul { display: grid; gap: 12px; }
.footer-logo {
  height: 84px; width: auto; margin-bottom: 20px;
  /* The porcelain disc reads on lacquer by itself; a soft shadow seats it. */
  filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.4));
}
.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(--azul); }

/* ---------- 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(24, 13, 6, 0.6) 0%, rgba(24, 13, 6, 0.42) 45%, rgba(43, 22, 10, 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(36px, 5.2vw, 64px); position: relative; z-index: 2; letter-spacing: -0.02em; color: #faf3e4; text-shadow: 0 6px 40px rgba(22, 12, 5, 0.6); }
.page-hero .kicker { position: relative; z-index: 2; color: #f0c983; }
.page-hero .kicker::after, .page-hero .kicker::before { background: rgba(250, 243, 228, 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(--azul-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(58, 38, 20, 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(250, 243, 228, 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(--azul); border-color: var(--azul); color: #fff7ec !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: #fff7ec !important; }

.page-account { background: var(--noite-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(21, 13, 6, .66), rgba(21, 13, 6, .8) 55%, rgba(16, 10, 5, .92));
}
.page-account .nav {
  background: rgba(250, 246, 239, 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: #fff7ec; }
.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(16, 10, 5, .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(15, 9, 4, 0.45);
}
.auth-card::after { content: ''; position: absolute; inset: 9px; pointer-events: none; border: 1px solid rgba(200, 64, 31, 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(--azul-deep); margin-top: 8px;
}
.auth-form input {
  width: 100%; background: var(--pedra); 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(--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(--pedra); 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(--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(--pedra); 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(--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: 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(15, 9, 4, 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(--tram), #c98d20 62%, #7c5a10); border: 0; }
.fidelity-card .kicker { display: block; margin-bottom: 8px; color: #5c4a10; }
.fidelity-card b { font-family: var(--display); font-size: 56px; font-weight: 700; color: #2a1c10; 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: #faf3e4; }
.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(15, 9, 4, 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(168, 53, 24, 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 tram yellow 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(21, 13, 6, .84), rgba(120, 62, 24, .45) 55%, rgba(21, 13, 6, .88));
}
.contact-band > .container { position: relative; z-index: 1; }
.contact-inner { text-align: center; max-width: 1080px; margin: 0 auto; }
.contact-inner .kicker { color: #f0c983; }
.contact-inner .kicker::before, .contact-inner .kicker::after { background: rgba(250, 243, 228, 0.28); }
.contact-inner .section-title { font-size: clamp(36px, 4.8vw, 56px); color: #faf3e4; }
.contact-lead { color: rgba(250, 243, 228, 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(250, 246, 239, 0.94); border: 0; border-radius: 16px;
  padding: 19px 21px;
  box-shadow: 0 14px 38px rgba(15, 9, 4, 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(15, 9, 4, 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(200, 64, 31, 0.24);
}
.cc-icon svg { width: 16px; height: 16px; fill: var(--azul-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(--azul-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: #faf3e4; box-shadow: inset 0 0 0 1.5px rgba(250, 243, 228, 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: #faf3e4; }
.deals-main .section-head .section-sub { color: rgba(250, 243, 228, 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(15, 9, 4, 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: #f0c983; 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(200, 64, 31, .2); border-radius: 16px;
  padding: 15px;
  box-shadow: 0 14px 36px rgba(15, 9, 4, 0.3);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.deal-card:hover { transform: translateY(-3px); box-shadow: 0 22px 48px rgba(15, 9, 4, 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(--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(--pedra); 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(--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: 12px;
  box-shadow: 0 20px 46px rgba(58, 38, 20, 0.25);
}
.timepick-panel[hidden] { display: none; }
.timepick-slot {
  background: var(--pedra); 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(--azul); }
.timepick-slot.on { background: var(--ink); color: var(--pedra); 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(--pedra); 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(--verde-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: #f4f0e4; 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: #f0c983; }
@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(--verde-deep); color: #f4f0e4; 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(--pedra);
    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: #fff7ec; }
  .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.16em; text-indent: 0.16em; font-size: 11.5px; }
  .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, 253, 248, 0.9); border: 1px solid var(--line-soft);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 12px 34px rgba(58, 38, 20, 0.2);
}
.reserve-badge svg { position: absolute; inset: 0; animation: spin 14s linear infinite; }
.reserve-badge svg text {
  fill: var(--azul-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(--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; }