/* Cooking On Charcoal design system.
   Taken off the house itself. The sign over the door is a row of hot letters,
   yellow burning into orange and then red, on a black fascia lit by a line of
   spots, and the kitchen behind it is a charcoal trough throwing flame under a
   steel hood. What comes out is wrapped in paper: tacos folded in kraft,
   pizzas on wooden boards, fries in a wire basket.

   So the site is charcoal black lit by embers, with the carte and the hours
   printed on kraft paper. Type is signage (Bungee, the letters on the fascia),
   read in a plain rounded grotesk (Rubik) with an angular technical voice
   (Chakra Petch) for eyebrows, prices and hours: the thermometer probe.
   Motifs: the grate, a diagonal ruling that closes the dark bands; embers,
   glowing dots that pulse in front of every eyebrow; the wrap, kraft paper
   cards with a serrated edge for the carte; heat, buttons and frames skewed
   like the letters on the sign. Things arrive hot and cool down: the reveal
   goes from white-hot and washed out to settled, not from invisible. */

:root {
  --charbon: #121014;      /* the ground: the fascia, the kitchen at night */
  --charbon-2: #1a1719;    /* the same a shade lighter, for a quiet band */
  --cendre: #262127;       /* ash: a card laid on the dark */
  --cendre-2: #322c33;
  --craie: #f4eee4;        /* the ink on dark: chalk on the board */
  --craie-dim: #b9b0a6;    /* the paragraph voice on dark */
  --fumee: #7d7379;        /* smoke: muted labels on dark */

  --braise: #ff6a1f;       /* the ember: the orange of the sign, the first voice */
  --braise-deep: #d9510f;
  --braise-glow: rgba(255, 106, 31, 0.45);
  --flamme: #ffb42e;       /* the yellow at the top of the flame */
  --rouge: #c8261f;        /* the red of ON CHARCOAL, and of the flag in the window */
  --rouge-deep: #9d1c17;

  /* Kraft paper: the wrap around a taco, the carte, the hours */
  --kraft: #e8d4ae;
  --kraft-2: #dcc496;
  --kraft-3: #f2e4c8;      /* a lighter sheet, for cards on the paper */
  --ink: #1c1712;          /* ink on kraft */
  --ink-soft: #3a3129;
  --para: #5a4d3f;         /* the paragraph voice on kraft */
  --line: rgba(28, 23, 18, 0.18);
  --line-soft: rgba(28, 23, 18, 0.09);

  --on-dusk: #f4eee4;
  --on-dusk-dim: #b9b0a6;
  --dusk-line: rgba(244, 238, 228, 0.16);
  --dusk-line-soft: rgba(244, 238, 228, 0.08);
  --ok: #3d8f5a;
  --err: #d8503f;

  /* The carte and the hours are printed on kraft. The names the JS-built
     pieces ask for are kept from the lineage. */
  --paper: #e8d4ae;
  --paper-2: #dcc496;
  --card: #f2e4c8;
  --ink-on-paper: #1c1712;
  --para-on-paper: #5a4d3f;
  --gold-on-paper: #b8420c;   /* prices on kraft: burnt orange, 4.5:1 on the paper */
  --rule-on-paper: rgba(28, 23, 18, 0.2);
  --zest: rgba(255, 106, 31, 0.1);

  --display: 'Bungee', 'Impact', 'Arial Black', sans-serif;
  --slab: 'Bungee', 'Impact', 'Arial Black', sans-serif;
  --sans: 'Rubik', 'Segoe UI', system-ui, sans-serif;
  --mono: 'Chakra Petch', 'Segoe UI', system-ui, sans-serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* The grate: the bars of the grill, drawn on the diagonal. Closes the
     hero, the signature band and the footer. */
  --grille: repeating-linear-gradient(135deg,
      var(--braise) 0 6px, transparent 6px 14px);
  --grille-dim: repeating-linear-gradient(135deg,
      rgba(244, 238, 228, 0.16) 0 5px, transparent 5px 13px);

  /* The lean of the letters on the sign */
  --lean: -7deg;

  /* The serrated edge of a paper wrap, cut along the bottom */
  --serrate: polygon(0 0, 100% 0, 100% calc(100% - 9px),
      97.5% 100%, 95% calc(100% - 9px), 92.5% 100%, 90% calc(100% - 9px), 87.5% 100%, 85% calc(100% - 9px),
      82.5% 100%, 80% calc(100% - 9px), 77.5% 100%, 75% calc(100% - 9px), 72.5% 100%, 70% calc(100% - 9px),
      67.5% 100%, 65% calc(100% - 9px), 62.5% 100%, 60% calc(100% - 9px), 57.5% 100%, 55% calc(100% - 9px),
      52.5% 100%, 50% calc(100% - 9px), 47.5% 100%, 45% calc(100% - 9px), 42.5% 100%, 40% calc(100% - 9px),
      37.5% 100%, 35% calc(100% - 9px), 32.5% 100%, 30% calc(100% - 9px), 27.5% 100%, 25% calc(100% - 9px),
      22.5% 100%, 20% calc(100% - 9px), 17.5% 100%, 15% calc(100% - 9px), 12.5% 100%, 10% calc(100% - 9px),
      7.5% 100%, 5% calc(100% - 9px), 2.5% 100%, 0 calc(100% - 9px));

  /* The tooth of kraft paper and the grain of the dark */
  --grain: repeating-linear-gradient(0deg, rgba(28, 23, 18, 0.03) 0 1px, transparent 1px 3px);
  --soot: radial-gradient(ellipse at 20% 0%, rgba(255, 106, 31, 0.07), transparent 55%);
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--soot), var(--charbon);
  color: var(--craie-dim);
  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(--braise); color: var(--charbon); }

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

/* ---------- Typography ---------- */
/* The letters on the sign: heavy signage caps, leaning into the wind. */
h1, h2, h3 {
  font-family: var(--display);
  font-weight: 400;
  color: var(--craie);
  line-height: 1.1;
}

/* The eyebrow: an ember in front of it, glowing and breathing, then the line
   set in the probe's angular caps. */
.kicker {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--mono); font-weight: 600;
  font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--braise); line-height: 1.4;
}
.kicker::before {
  content: ''; flex: none; width: 10px; height: 10px; border-radius: 50%;
  background: var(--flamme);
  box-shadow: 0 0 0 3px rgba(255, 106, 31, 0.28), 0 0 18px 4px var(--braise-glow);
  animation: ember 2.8s ease-in-out infinite;
}
@keyframes ember {
  0%, 100% { background: var(--flamme); box-shadow: 0 0 0 3px rgba(255, 106, 31, 0.28), 0 0 18px 4px var(--braise-glow); }
  50% { background: var(--braise); box-shadow: 0 0 0 3px rgba(255, 106, 31, 0.14), 0 0 8px 1px rgba(255, 106, 31, 0.25); }
}
.kicker::after { content: ''; flex: 0 0 46px; height: 1px; background: rgba(255, 106, 31, 0.4); }
.section-head.center .kicker { justify-content: center; }

.section-title {
  font-family: var(--display);
  font-size: clamp(26px, 3.4vw, 46px);
  margin: 18px 0 0;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  max-width: 20ch;
}
/* The heat under the title: a short bar of the grate, leaning like the sign */
.section-title::after {
  content: ''; display: block; width: 74px; height: 8px; margin-top: 16px;
  background: var(--grille); transform: skewX(var(--lean));
}
.section-head.center .section-title { max-width: none; }
.section-head.center .section-title::after { margin-left: auto; margin-right: auto; }
.section-sub { color: var(--craie-dim); 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 line under the sign, set down the left edge. 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(--mono); font-weight: 600;
  font-size: 10.5px; letter-spacing: 0.4em; text-transform: uppercase;
  color: var(--fumee); opacity: 0.8;
  pointer-events: none;
}
@media (max-width: 1400px) { .side-rail { display: none; } }

/* ---------- Buttons ---------- */
/* A button is a letter off the sign: a hot block leaning into the wind, the
   label set straight inside it. Ember is the first voice, chalk the second,
   and the hover is a glow, not a colour swap. */
.btn {
  display: inline-block;
  position: relative;
  z-index: 0;
  padding: 16px 36px;
  border: 0;
  border-radius: 3px;
  background: var(--braise);
  color: var(--charbon);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  text-indent: 0.14em;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  transform: skewX(var(--lean));
  box-shadow: 0 0 0 0 var(--braise-glow);
  transition: background 0.4s var(--ease), color 0.4s var(--ease),
    transform 0.4s var(--ease), box-shadow 0.5s var(--ease);
}
.btn > * { display: inline-block; transform: skewX(7deg); }
.btn:hover {
  background: var(--flamme);
  transform: skewX(var(--lean)) translateY(-2px);
  box-shadow: 0 10px 30px -6px var(--braise-glow), 0 0 0 2px rgba(255, 180, 46, 0.35);
}

.btn.solid { background: var(--craie); color: var(--charbon); }
.btn.solid:hover { background: var(--flamme); color: var(--charbon); }

/* Drawn, not filled */
.btn.ghost {
  background: transparent; color: var(--craie);
  box-shadow: inset 0 0 0 1.5px rgba(244, 238, 228, 0.55);
}
.btn.ghost:hover { background: var(--craie); color: var(--charbon); box-shadow: none; }

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

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

/* ---------- The bands ---------- */
/* The page runs charcoal and kraft by turns. Dark bands part with a hairline
   of smoke; the three hot ones (hero, signature, footer) close under the
   grate. */
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(--dusk-line) 18%, var(--dusk-line) 82%, transparent);
  z-index: 2;
}
.hero::before { display: none; }

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

/* ---------- Paper ---------- */
/* The carte, the week and the hours are printed on kraft: the paper a taco
   is wrapped in. Warm, textured, ink on it. */
section.paper {
  background-color: var(--paper);
  background-image: var(--grain), url('../images/paper.jpg');
  background-size: auto, 900px 900px;
  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(--braise-deep); }
.paper .kicker::after { background: rgba(217, 81, 15, 0.45); }
.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(--kraft-3); }
.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(--gold-on-paper); }
.paper .menu-item .mi-dots { border-bottom-color: rgba(28, 23, 18, 0.3); }
.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(28, 23, 18, 0.28); }
.paper .hours-list .time { color: var(--para-on-paper); }
.paper .hours-list .closed { color: var(--rouge); }
.paper .contact-lines { color: var(--para-on-paper); }
.paper .contact-lines strong { color: var(--braise-deep); }
.paper .contact-lines a:hover { color: var(--rouge); }
.paper #map { border-color: var(--rule-on-paper); }
.paper ::selection { background: var(--braise); color: var(--kraft-3); }

/* ---------- Nav ---------- */
/* Over the hero the bar is smoke over the film; once the page scrolls it is
   the fascia, black, with the letters lit. */
.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(18, 16, 20, 0.92);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  padding: 10px 0;
  box-shadow: 0 1px 0 var(--dusk-line-soft), 0 12px 34px rgba(0, 0, 0, 0.35);
}
.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 flame mark on its own, lit from behind */
.nav-logo img {
  height: 54px; width: auto; flex: none;
  filter: drop-shadow(0 0 12px rgba(255, 106, 31, 0.45));
  transition: height 0.4s var(--ease), filter 0.4s var(--ease);
}
.nav.scrolled .nav-logo img { height: 44px; filter: drop-shadow(0 0 8px rgba(255, 106, 31, 0.35)); }
.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(--mono);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  text-indent: 0.14em;
  color: var(--craie);
  opacity: 0.95;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 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 { text-shadow: none; }
/* The grate in miniature under the link */
.nav-links a::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 2px; height: 4px;
  background: var(--grille);
  transform: scaleX(0); transform-origin: right;
  transition: transform 0.5s var(--ease);
}
.nav-links a:hover { opacity: 1; color: var(--flamme); }
.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(255, 106, 31, 0.7); padding: 10px 20px !important; border-radius: 3px; transform: skewX(var(--lean)); }
.nav-cta:hover { background: var(--braise); border-color: var(--braise); color: var(--charbon) !important; }
.nav.scrolled .nav-cta { border-color: var(--braise); }
.nav.scrolled .nav-cta:hover { background: var(--braise); border-color: var(--braise); color: var(--charbon) !important; }
.nav-cta::after { display: none; }

/* Two-state switch with an ember knob sliding under the active language */
.lang-switch {
  position: relative; display: flex; padding: 3px;
  border: 1px solid rgba(244, 238, 228, 0.3); border-radius: 3px;
}
.nav.scrolled .lang-switch { border-color: var(--dusk-line); }
.lang-switch::before {
  content: ''; position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px);
  background: var(--braise); border-radius: 2px;
  transition: transform 0.4s var(--ease);
}
.lang-switch.on-fr::before { transform: translateX(100%); }
.lang-switch button {
  position: relative; z-index: 1; background: transparent; border: 0; color: var(--craie);
  font-family: var(--mono); font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em; padding: 6px 13px;
  transition: color 0.35s;
}
.nav.scrolled .lang-switch button { color: var(--craie-dim); }
.lang-switch button.active, .nav.scrolled .lang-switch button.active { color: var(--charbon); }

.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: var(--craie); transition: 0.4s var(--ease); }
.nav.menu-open .burger span { background: var(--craie); }
.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(--charbon); }
.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%); } }
/* The film is smoke and embers, and the words have to read on it: a pool of
   shade under them and a black foot the next band arrives out of. */
.hero-bg::after {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(52% 46% at 50% 50%, rgba(18, 16, 20, 0.6), rgba(18, 16, 20, 0.26) 62%, transparent 82%),
    linear-gradient(180deg, rgba(18, 16, 20, 0.5) 0%, rgba(18, 16, 20, 0.08) 40%, rgba(18, 16, 20, 0.9) 100%);
}
/* The grate closes the hero */
.hero::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 10px; z-index: 3;
  background: var(--grille);
}
/* Smoke: soft wisps rising off the trough, slow, and fewer on a phone where
   they would sit on the words. The markup is the same four elements the
   lineage used for its facets. */
.hero-facets { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.hero-facets i {
  position: absolute; display: block; border-radius: 50%;
  background: radial-gradient(circle, rgba(244, 238, 228, 0.16), rgba(244, 238, 228, 0.04) 55%, transparent 72%);
  filter: blur(18px);
  animation: smoke 14s ease-in-out infinite;
  opacity: 0;
}
.hero-facets i:nth-child(1) { left: 12%; bottom: -10%; width: 340px; height: 340px; }
.hero-facets i:nth-child(2) { left: 38%; bottom: -14%; width: 420px; height: 420px; animation-delay: -5s; animation-duration: 17s; }
.hero-facets i:nth-child(3) { right: 14%; bottom: -8%; width: 300px; height: 300px; animation-delay: -9s; animation-duration: 15s; }
.hero-facets i:nth-child(4) { right: 34%; bottom: -12%; width: 260px; height: 260px; animation-delay: -12s; animation-duration: 19s;
  background: radial-gradient(circle, rgba(255, 106, 31, 0.18), rgba(255, 106, 31, 0.04) 55%, transparent 72%); }
@keyframes smoke {
  0% { transform: translate3d(0, 0, 0) scale(0.8); opacity: 0; }
  15% { opacity: 1; }
  100% { transform: translate3d(60px, -90vh, 0) scale(1.6); opacity: 0; }
}
@media (max-width: 900px) { .hero-facets i:nth-child(2), .hero-facets i:nth-child(4) { display: none; } }

.hero-content { position: relative; z-index: 2; padding: 0 24px; }
/* The line is set in the sign's own letters, white-hot, and it lands like
   the letters being switched on: from a washed, over-bright glow to settled. */
.hero-script {
  font-family: var(--display);
  font-size: clamp(34px, 5.4vw, 80px);
  color: var(--craie);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1.02;
  letter-spacing: 0.01em;
  max-width: 15ch;
  margin: 0 auto;
  text-shadow: 0 0 34px rgba(255, 106, 31, 0.35), 0 6px 40px rgba(0, 0, 0, 0.6);
}
.hero-tag {
  margin-top: 26px;
  font-family: var(--mono);
  color: var(--flamme);
  text-shadow: 0 2px 22px rgba(0, 0, 0, 0.8);
  font-size: clamp(11.5px, 1.15vw, 14px);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.32em;
  text-indent: 0.32em;
}
.hero-actions { display: flex; gap: 16px; 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; animation: heroTitleIn 1.6s var(--ease) forwards; }
.hero-content > *:nth-child(2) { animation-delay: 0.4s; }
.hero-content > *:nth-child(3) { animation-delay: 0.6s; }
.hero-content > *:nth-child(4) { animation-delay: 0.76s; }
@keyframes heroIn { to { opacity: 1; transform: none; } }
@keyframes heroTitleIn {
  0% { opacity: 0; filter: brightness(2.4) blur(6px); letter-spacing: 0.08em; }
  40% { opacity: 1; filter: brightness(1.8) blur(0); }
  100% { opacity: 1; filter: brightness(1) blur(0); letter-spacing: 0.01em; }
}
@keyframes navItemIn { to { opacity: 1; transform: none; } }

/* The hours: the two facts people look for, ten and eleven */
.hero-hours {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  margin-top: 36px;
  font-family: var(--mono); font-size: 13.5px; font-weight: 700;
  letter-spacing: 0.3em; text-indent: 0.3em;
  color: var(--craie);
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.85);
}
.hero-hours i { display: block; width: 54px; height: 6px; background: var(--grille); transform: skewX(var(--lean)); }
@media (max-width: 700px) { .hero-hours { margin-top: 28px; letter-spacing: 0.22em; text-indent: 0.22em; } }

/* ---------- Reveal ---------- */
/* Things arrive hot: washed out and over-bright, then they cool into place.
   No clip-path, so nothing on the page is ever invisible to a scroll
   measurement. */
.reveal { opacity: 0; transform: translateY(26px); filter: brightness(1.7) saturate(0.3); transition: opacity 0.9s var(--ease), transform 1s var(--ease), filter 1.2s var(--ease); }
.reveal.visible { opacity: 1; transform: none; filter: none; }
.reveal-left { opacity: 0; transform: translateX(-30px) rotate(-1deg); filter: brightness(1.7) saturate(0.3); transition: opacity 0.9s var(--ease), transform 1.1s var(--ease), filter 1.2s var(--ease); }
.reveal-left.visible { opacity: 1; transform: none; filter: 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 wrap: it sits on a sheet of kraft, leaning a little the
   way a plate is put down, with a scorched shadow under it. Hover straightens
   it and pushes the picture in. */
.img-frame {
  position: relative; overflow: hidden;
  background: var(--kraft);
  padding: 10px;
  border-radius: 2px;
  transform: rotate(-1.6deg);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 106, 31, 0.12);
  transition: transform 0.7s var(--ease), box-shadow 0.7s var(--ease);
}
.img-frame img { transition: transform 1.4s var(--ease); border-radius: 1px; }
.img-frame:hover { transform: rotate(0deg); box-shadow: 0 34px 70px -18px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 106, 31, 0.3), 0 0 40px -6px var(--braise-glow); }
.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%;
  transform: rotate(2.2deg);
}
.about-images .img-accent.visible { transform: rotate(2.2deg); }
.about-text p { color: var(--craie-dim); margin: 26px 0; font-size: 16.5px; }
/* Four words the house is, stamped in the probe's caps */
.about-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.about-tags span {
  font-family: var(--mono); font-size: 11.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--craie); padding: 8px 14px; border: 1.5px solid var(--dusk-line);
  border-radius: 3px; transform: skewX(var(--lean));
}
.about-tags span:nth-child(1) { border-color: var(--braise); color: var(--flamme); }
.about-tags span:nth-child(2) { border-color: var(--rouge); }

/* ---------- 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: 3px;
  padding: 13px 36px;
  font-family: var(--mono); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.14em; text-indent: 0.14em; font-size: 12.5px;
  transform: skewX(var(--lean));
  transition: 0.4s var(--ease);
}
.menu-tabs button.active { border-color: var(--ink); color: var(--kraft-3); background: var(--ink); }
.menu-cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 4vw, 48px) clamp(30px, 4vw, 48px); align-items: start; }
@media (min-width: 1500px) { .menu-cols { grid-template-columns: repeat(3, 1fr); } }
/* Every category is a wrap: a lighter sheet of kraft with a serrated bottom
   edge, put down slightly askew, and never twice the same way in a row.
   min-width:0 stops a long dish name from forcing its track past the page. */
.menu-cat {
  break-inside: avoid; min-width: 0;
  background: var(--kraft-3);
  clip-path: var(--serrate);
  padding: 26px 26px 34px;
  transform: rotate(-0.6deg);
  box-shadow: 0 18px 30px -18px rgba(28, 23, 18, 0.5);
}
.menu-cat:nth-child(2n) { transform: rotate(0.5deg); }
.menu-cat:nth-child(3n) { transform: rotate(-0.3deg); }
/* The heading as printed on the wrap: signage caps, a hot rule under it */
.cat-head {
  text-align: left;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 2px solid var(--braise);
}
.menu-cat h3 {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--display);
  font-size: 14.5px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink);
  line-height: 1.3;
  margin: 0;
}
.menu-cat h3::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--braise); box-shadow: 0 0 10px 2px var(--braise-glow); }
.menu-cat-sub {
  font-family: var(--sans); font-style: italic;
  color: var(--para);
  font-size: 14px;
  line-height: 1.45;
  margin: 8px 0 0 20px;
}
.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(90, 77, 63, 0.5); transform: translateY(-5px); }
.menu-item .mi-price { font-family: var(--mono); font-weight: 700; color: var(--gold-on-paper); font-size: 14px; white-space: nowrap; letter-spacing: 0.02em; }
.menu-item-desc { color: var(--para); opacity: 0.85; 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 two ways: 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 trough itself: the one band on the page that goes to the fire. Embers
   under a dark veil, the grate along the top, the list on a sheet of kraft. */
.formule {
  background:
    linear-gradient(180deg, rgba(18, 16, 20, 0.86), rgba(18, 16, 20, 0.7) 50%, rgba(18, 16, 20, 0.92)),
    url('../images/embers.jpg') center / cover no-repeat;
  color: var(--on-dusk-dim);
}
.formule::before {
  height: 10px;
  background: var(--grille) !important;
  top: -1px;
}
.formule .kicker { color: var(--flamme); }
.formule .kicker::after { background: rgba(255, 180, 46, 0.4); }
.formule .section-title { color: var(--craie); }
.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.6vw, 52px); }
.formule-copy > p { color: rgba(244, 238, 228, 0.84); margin-bottom: 26px; max-width: 44ch; }
.formule-time {
  font-family: var(--mono); font-size: 12.5px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--flamme); margin: 18px 0 !important;
}
.formule-copy .btn { margin-top: 8px; }
/* The sheet: kraft, serrated, an ember before every line */
.formule-list {
  position: relative;
  background: var(--kraft-3);
  background-image: var(--grain);
  clip-path: var(--serrate);
  color: var(--para);
  padding: clamp(30px, 3.4vw, 46px) clamp(26px, 3vw, 42px) clamp(38px, 4vw, 54px);
  transform: rotate(1.2deg);
  box-shadow: 0 40px 70px -30px rgba(0, 0, 0, 0.8);
}
.fm-row { display: flex; align-items: baseline; gap: 12px; padding: 9px 0; }
.fm-row::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--braise); box-shadow: 0 0 8px 1px var(--braise-glow); 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(90, 77, 63, 0.45); transform: translateY(-4px); }
.fm-price { font-family: var(--mono); font-weight: 700; font-size: 14px; color: var(--gold-on-paper); white-space: nowrap; }
.formule-list .menu-item-desc { color: var(--para); }
@media (max-width: 900px) { .formule-inner { grid-template-columns: 1fr; } .formule-list { transform: none; } }

/* ---------- La semaine ---------- */
/* Seven days, read off the opening hours the owner keeps in the panel. Seven
   order slips pinned in a row on the kraft, the day the page is looked at
   burnt dark. */
.programme-section { background-color: var(--paper); }
.programme-grid {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 10px;
}
.prog-day {
  position: relative;
  background: var(--kraft-3);
  clip-path: var(--serrate);
  padding: 28px 12px 34px;
  text-align: center;
  transition: transform 0.5s var(--ease), background 0.5s var(--ease);
}
.prog-day::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--grille);
}
.prog-day:hover { transform: translateY(-4px); }
.prog-day.today { background: var(--charbon); }
.prog-day.today .prog-name { color: var(--flamme); }
.prog-day.today .prog-hours { color: var(--on-dusk-dim); }
.prog-day.today .prog-note { color: var(--craie); }
.prog-name {
  display: block; font-family: var(--display); font-weight: 400; font-size: 11.5px;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--ink);
}
.prog-hours { display: block; font-family: var(--mono); font-size: 12.5px; font-weight: 600; color: var(--para); opacity: 0.85; 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(--braise-deep); margin-top: 16px; min-height: 34px;
}
.prog-note:empty::before { content: '·'; opacity: 0.3; }
.prog-day.shut .prog-hours { color: var(--rouge); 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 place is a photograph leaning on the counter: rounded, on kraft, with
   the name on a hot label across the foot. */
.space-card {
  position: relative; overflow: hidden; aspect-ratio: 3 / 4.2;
  border-radius: 4px;
  background: var(--cendre);
  box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.8);
}
.space-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease), filter 0.8s var(--ease); filter: saturate(0.92); }
.space-card:hover img { transform: scale(1.07); filter: saturate(1.05); }
.space-card::before {
  content: ''; position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(180deg, transparent 50%, rgba(18, 16, 20, 0.92));
}
.space-card figcaption {
  position: absolute; left: 0; right: 0; bottom: 28px; z-index: 4;
  text-align: center;
  font-family: var(--display); font-weight: 400;
  font-size: 15px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--craie);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6);
}
.space-card figcaption small:empty { display: none; }
.space-card figcaption small {
  display: block;
  font-family: var(--mono); font-weight: 600;
  font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--flamme); margin-top: 8px; line-height: 1.5;
}

/* ---------- Gallery ---------- */
/* Six frames from the house's own clips, which are portrait, so the cells are
   portrait: the lead takes four, the rest one each. */
.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;
  border-radius: 4px;
  background: var(--cendre);
}
.gal-grid figure::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 106, 31, 0); transition: box-shadow 0.5s var(--ease);
}
.gal-grid figure:hover::after { box-shadow: inset 0 0 0 2px rgba(255, 106, 31, 0.7), inset 0 0 40px rgba(255, 106, 31, 0.15); }
.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.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(18, 16, 20, 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); border-radius: 3px; }
.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; border-radius: 3px;
}
.lightbox button:hover { border-color: var(--braise); color: var(--flamme); }
.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: 400; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink); }
.hours-list .day-note { font-family: var(--sans); font-size: 14px; line-height: 1.3; color: var(--braise-deep); font-weight: 500; }
.hours-list .dots { flex: 1; border-bottom: 1px dotted rgba(90, 77, 63, 0.4); transform: translateY(-4px); }
.hours-list .time { font-family: var(--mono); font-size: 13.5px; font-weight: 600; color: var(--ink-soft); letter-spacing: 0.04em; }
.hours-list .closed { font-family: var(--mono); font-size: 12px; color: var(--rouge); 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(--rouge); }
.contact-lines strong { color: var(--braise-deep); font-weight: 500; }
#map { min-height: 440px; height: 100%; border: 1px solid var(--line); z-index: 1; border-radius: 4px; box-shadow: 0 30px 60px -30px rgba(28, 23, 18, 0.6); }
#map .leaflet-tile-pane { filter: saturate(0.7) sepia(0.18) contrast(0.98); }
#map .leaflet-control-attribution { background: rgba(242, 228, 200, 0.9); color: var(--para); }
#map .leaflet-control-attribution a { color: var(--braise-deep); }
#map .leaflet-bar a { background: var(--card); color: var(--ink); border-bottom-color: var(--line); }
#map .leaflet-bar a:hover { background: var(--kraft); color: var(--rouge); }
/* The pin is an ember: an orange dot with a pulsing ring of heat */
.map-pin { position: relative; width: 22px; height: 22px; }
.map-pin::before {
  content: ''; position: absolute; inset: 3px; border-radius: 50%;
  background: var(--braise); border: 3px solid var(--kraft-3);
  box-shadow: 0 0 14px 2px var(--braise-glow);
}
.map-pin::after {
  content: ''; position: absolute; inset: -12px; border-radius: 50%;
  border: 2px solid var(--braise);
  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: 3px; }
.leaflet-popup-content a { color: var(--braise-deep); font-weight: 500; }

/* ---------- Reservation ---------- */
/* The kitchen under a night veil, and the form on a sheet of kraft laid on
   the counter in the middle of it. */
.reserve-section {
  background:
    linear-gradient(rgba(18, 16, 20, 0.7), rgba(18, 16, 20, 0.86)),
    url('../images/space-restaurant.jpg') center/cover fixed;
}
.reserve-panel {
  position: relative;
  max-width: 780px; margin: 0 auto;
  background: var(--kraft-3);
  background-image: var(--grain);
  clip-path: var(--serrate);
  color: var(--para);
  padding: clamp(36px, 5vw, 68px) clamp(36px, 5vw, 68px) clamp(46px, 6vw, 80px);
}
.reserve-panel > * { position: relative; z-index: 1; }
.reserve-panel .kicker { color: var(--braise-deep); }
.reserve-panel .section-title { color: var(--ink); }
.reserve-panel .section-sub, .reserve-panel .form-note { color: var(--para); }
.reserve-panel .prefill-note { color: var(--braise-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: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.18em; color: var(--braise-deep); }
.form-field input, .form-field select {
  background: #fbf5e8;
  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: 3px; appearance: none;
}
.form-field input:focus, .form-field select:focus { outline: none; border-color: var(--braise); box-shadow: 0 0 0 3px rgba(255, 106, 31, 0.18); }
.form-field input::placeholder { color: rgba(90, 77, 63, 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(90, 77, 63, 0.75); letter-spacing: 0.02em; }
.prefill-note { color: var(--braise-deep); font-size: 13px; margin-top: 12px; }

/* ---------- Footer ---------- */
/* The fascia after closing, the sign still lit, closed under the grate. */
footer {
  background: var(--charbon);
  background-image: var(--soot);
  color: var(--on-dusk-dim);
  padding: 90px 0 34px;
}
footer::before {
  height: 10px;
  background: var(--grille);
}
.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: 12.5px; font-weight: 400;
  text-transform: uppercase; letter-spacing: 0.06em;
  margin-bottom: 20px; color: var(--flamme);
}
.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(--flamme); }
.footer-grid ul { display: grid; gap: 12px; }
.footer-logo {
  height: 84px; width: auto; margin-bottom: 22px;
  filter: drop-shadow(0 0 16px rgba(255, 106, 31, 0.35));
}
.socials { display: flex; gap: 14px; margin-top: 26px; }
/* The mark is the button. No frame, no tint: these are the official logos. */
.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: 12.5px; letter-spacing: 0.04em;
}
.footer-bottom a:hover { color: var(--flamme); }

/* ---------- 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(18, 16, 20, 0.66) 0%, rgba(18, 16, 20, 0.42) 45%, rgba(18, 16, 20, 0.85) 100%);
}
.page-hero::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 10px; z-index: 3;
  background: var(--grille);
}
.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: var(--craie); text-shadow: 0 0 34px rgba(255, 106, 31, 0.3), 0 6px 40px rgba(0, 0, 0, 0.6); }
.page-hero .kicker { position: relative; z-index: 2; color: var(--flamme); justify-content: center; }
.page-hero .kicker::after { flex: 0 0 46px; background: rgba(255, 180, 46, 0.4); }
.legal { max-width: 820px; margin: 0 auto; }
.legal h1 { letter-spacing: 0.01em; }
.legal h2 { font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.2em; margin: 48px 0 16px; color: var(--braise); font-weight: 700; }
.legal p, .legal li { color: var(--craie-dim); 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: 4px;
  background: var(--kraft-3); color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
  font-size: 14.5px; font-weight: 400; line-height: 1.5;
  transition: transform .55s var(--ease), opacity .4s var(--ease);
  opacity: 0;
}
.toast.show { transform: translate(-50%, 0); opacity: 1; }
.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(244, 238, 228, 0.45); border-radius: 3px;
  padding: 10px 20px !important; letter-spacing: 0.16em; text-indent: 0.16em;
  transition: background .35s, color .35s, border-color .35s;
}
.nav.scrolled .nav-auth { border-color: var(--dusk-line); }
.nav-auth::after { display: none; }
.nav-auth:hover { background: var(--craie); border-color: var(--craie); color: var(--charbon) !important; }
.nav-auth.signed-in { border-color: var(--braise); color: var(--flamme) !important; }
.nav.scrolled .nav-auth.signed-in { color: var(--flamme) !important; border-color: var(--braise); }
.nav-auth.signed-in:hover { background: var(--braise); border-color: var(--braise); color: var(--charbon) !important; }

.page-account { background: var(--charbon); }
.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(18, 16, 20, .7), rgba(18, 16, 20, .82) 55%, rgba(18, 16, 20, .94));
}
.page-account .nav {
  background: rgba(18, 16, 20, 0.94); backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--dusk-line-soft); padding: 10px 0;
}
.page-account .nav .nav-links a, .page-account .nav .nav-right a { text-shadow: none; }
.page-account .nav .lang-switch { border-color: var(--dusk-line); }
.page-account .nav .lang-switch button { color: var(--craie-dim); }
.page-account .nav .lang-switch button.active { color: var(--charbon); }
.page-account .nav .nav-auth { border-color: var(--dusk-line); }
.page-account .nav-logo img { height: 46px; }
.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(18, 16, 20, .7); }
.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(--kraft-3); background-image: var(--grain); border: 1px solid var(--line-soft);
  border-radius: 4px; padding: 34px 36px; text-align: center;
  box-shadow: 0 34px 80px rgba(0, 0, 0, 0.55);
}
.auth-card::after { content: ''; position: absolute; inset: 9px; pointer-events: none; border: 1px solid rgba(217, 81, 15, 0.2); border-radius: 3px; }
.auth-card > * { position: relative; z-index: 1; }
.auth-card .section-title, .auth-card h1, .auth-card h2, .auth-card h3 { color: var(--ink); }
.auth-card .section-title::after { margin-left: auto; margin-right: auto; }
.auth-logo { width: 170px; height: auto; margin: 0 auto 10px; display: block; }
.auth-card .section-title { font-size: 25px; 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(--mono); font-weight: 600; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--braise-deep); margin-top: 8px;
}
.auth-form input {
  width: 100%; background: #fbf5e8; border: 1.5px solid var(--line-soft);
  border-radius: 3px; padding: 12px 13px; color: var(--ink);
  font-family: var(--sans); font-size: 14.5px;
}
.auth-form input:focus { outline: none; border-color: var(--braise); }
.auth-form .btn { margin-top: 16px; width: 100%; }
.auth-form .btn.ghost { margin-top: 8px; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.auth-form .btn.ghost:hover { background: var(--ink); color: var(--kraft-3); }
.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: #fbf5e8; border: 1.5px solid var(--line-soft); border-radius: 3px;
  color: var(--para); padding: 10px 6px; font-size: 13px; font-family: var(--sans); transition: .3s;
}
.gender-row button:hover { border-color: var(--braise); }
.gender-row button.active { border-color: var(--braise); background: var(--zest); color: var(--braise-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(--braise-deep); text-decoration: underline; }
.pending-title { font-family: var(--display); font-size: 22px; font-weight: 400; margin-bottom: 8px; color: var(--ink); }

.auth-form select {
  width: 100%; background: #fbf5e8; border: 1.5px solid var(--line-soft);
  border-radius: 3px; padding: 12px 13px; color: var(--ink);
  font-family: var(--sans); font-size: 14.5px; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--braise-deep) 50%),
                    linear-gradient(135deg, var(--braise-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(--braise); }
.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(--braise-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; font-weight: 400;
}
.stay-row input { width: 16px; height: 16px; accent-color: var(--braise); 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(--braise-deep); text-decoration: underline; white-space: nowrap; }
.forgot-link:hover { color: var(--ink); }
.birthday-note {
  font-size: 12px; color: var(--braise-deep); margin-top: 10px; text-align: center;
  background: var(--zest); border: 1px solid var(--line-soft); border-radius: 3px; 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(--kraft-3); background-image: var(--grain);
  border: 1px solid var(--line-soft); border-radius: 4px; padding: 28px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
}
.member-card h3 { font-family: var(--display); font-size: 19px; font-weight: 400; margin-bottom: 8px; color: var(--ink); }
.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(--charbon), var(--rouge-deep) 55%, var(--braise)); border: 0; }
.fidelity-card .kicker { display: block; margin-bottom: 8px; color: var(--flamme); }
.fidelity-card b { font-family: var(--display); font-size: 52px; font-weight: 400; color: var(--craie); line-height: 1; }
.fidelity-card p { color: rgba(244, 238, 228, 0.85); font-size: 13px; margin-top: 12px; line-height: 20px; }
.fidelity-card.off b { color: var(--craie-dim); opacity: 0.6; }

.member-heading { font-family: var(--display); font-size: 22px; font-weight: 400; margin-bottom: 18px; color: var(--craie); }
.res-list { display: grid; gap: 12px; }
.res-card {
  display: flex; align-items: center; gap: 18px; background: var(--kraft-3);
  border: 1px solid var(--line-soft); border-radius: 4px; padding: 17px 22px;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.4);
}
.res-when { display: grid; min-width: 92px; }
.res-when b { font-family: var(--display); font-size: 18px; font-weight: 400; color: var(--braise-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(--mono); font-weight: 600; font-size: 10.5px; letter-spacing: 0.14em; text-indent: 0.14em; text-transform: uppercase; padding: 6px 13px; border-radius: 3px; border: 1.5px solid; transform: skewX(var(--lean)); }
.res-badge.pending { color: var(--braise-deep); border-color: rgba(217, 81, 15, 0.5); }
.res-badge.confirmed { color: var(--ok); border-color: rgba(61, 143, 90, 0.5); }
.res-badge.cancelled { color: var(--err); border-color: rgba(216, 80, 63, 0.5); }

.hidden { display: none !important; }

/* ---------- Contact band ---------- */
/* Embers under a night veil with one warm glow of red in it, the cards on
   kraft with a hot 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(18, 16, 20, .88), rgba(157, 28, 23, .42) 55%, rgba(18, 16, 20, .92));
}
.contact-band > .container { position: relative; z-index: 1; }
.contact-inner { text-align: center; max-width: 1080px; margin: 0 auto; }
.contact-inner .kicker { color: var(--flamme); }
.contact-inner .kicker::after { background: rgba(255, 180, 46, 0.4); }
.contact-inner .section-title { font-size: clamp(34px, 4.6vw, 54px); color: var(--craie); }
.contact-lead { color: rgba(244, 238, 228, 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: var(--kraft-3); background-image: var(--grain); border: 0;
  border-left: 6px solid var(--braise);
  border-radius: 3px;
  padding: 19px 21px;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.contact-card:nth-child(2) { border-left-color: var(--flamme); }
.contact-card:nth-child(3) { border-left-color: var(--rouge); }
.contact-card:nth-child(4) { border-left-color: var(--ink); }
.contact-card:nth-child(5) { border-left-color: #1fa855; }
a.contact-card:hover { transform: translateY(-3px); box-shadow: 0 20px 40px -14px rgba(0, 0, 0, 0.6); }
.cc-icon {
  width: 42px; height: 42px; flex: none; display: grid; place-items: center;
  background: var(--kraft); border: 1px solid var(--line-soft); border-radius: 3px;
}
.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: 600; font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--braise-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: var(--craie); box-shadow: inset 0 0 0 1.5px rgba(244, 238, 228, 0.55); }
.contact-band .btn.ghost:hover { background: var(--craie); color: var(--charbon); 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: var(--craie); }
.deals-main .section-head .section-sub { color: rgba(244, 238, 228, 0.8); }
.deals-empty {
  background: var(--kraft-3); border: 1px solid var(--line-soft); border-radius: 4px;
  padding: 44px 32px; text-align: center; color: var(--para); max-width: 580px; margin: 0 auto;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
}
.deals-empty .contact-actions { margin-top: 24px; margin-bottom: 0; }
.deal-group { margin-bottom: 42px; }
.deal-group h2 { font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.26em; text-indent: 0.26em; color: var(--flamme); 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(--kraft-3); border: 1px solid rgba(217, 81, 15, .2); border-radius: 4px;
  padding: 15px;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.4);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.deal-card:hover { transform: translateY(-3px); box-shadow: 0 22px 48px rgba(0, 0, 0, 0.5); }
.deal-card img { width: 74px; height: 74px; border-radius: 3px; object-fit: cover; flex: none; }
.deal-body { min-width: 0; flex: 1; }
.deal-body h3 { font-family: var(--display); font-size: 16px; font-weight: 400; margin-bottom: 3px; color: var(--ink); }
.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(--mono); color: var(--braise-deep); font-size: 18px; font-weight: 700; }
.deal-badge {
  position: absolute; top: 12px; right: 12px; background: var(--zest);
  color: var(--braise-deep); border-radius: 3px; padding: 4px 11px;
  font-family: var(--mono); 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(--flamme) !important; }
.nav.scrolled .nav-deals { color: var(--flamme) !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(--mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.18em; text-indent: 0.18em;
  color: var(--braise-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: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--braise); }
.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: #fbf5e8; 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: 3px;
  transition: border-color 0.35s, color 0.35s;
}
.timepick-btn:hover, .timepick-btn.open { border-color: var(--braise); }
.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(--braise-deep);
  transition: transform 0.3s var(--ease);
}
.timepick-btn.open .tp-caret { transform: rotate(180deg); }
.timepick-btn svg { width: 16px; height: 16px; fill: var(--braise-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(--kraft-3); border: 1px solid var(--line);
  border-radius: 3px;
  box-shadow: 0 20px 46px rgba(0, 0, 0, 0.35);
}
.timepick-panel[hidden] { display: none; }
.timepick-slot {
  background: #fbf5e8; border: 1.5px solid transparent; color: var(--para);
  padding: 10px 4px; font-family: var(--mono); font-weight: 600; font-size: 13.5px; letter-spacing: 0.04em;
  border-radius: 3px;
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}
.timepick-slot:hover { background: var(--zest); color: var(--ink); border-color: var(--braise); }
.timepick-slot.on { background: var(--braise); color: var(--charbon); border-color: var(--braise); }
.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(--charbon); 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(--dusk-line-soft); border-top-color: var(--braise);
  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(--rouge);
  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: var(--craie); font-weight: 600;
  font-family: var(--mono); font-size: 13.5px; letter-spacing: 0.14em; text-decoration: none;
  text-transform: uppercase;
}
a.promo-banner-text:hover { color: var(--flamme); }
@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(--rouge); color: var(--craie); font-weight: 600;
  border-radius: 3px; padding: 12px 28px;
  font-family: var(--mono); 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(--charbon);
    background-image: var(--soot);
    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(--craie); text-shadow: none; }
  .nav-links .nav-cta { border: 1.5px solid var(--braise); padding: 14px 30px !important; color: var(--flamme); }
  .nav-links li { width: 100%; text-align: center; opacity: 0; transform: translateY(14px); }
  .nav-links .lang-switch { display: inline-flex; border-color: var(--dusk-line); }
  .nav-links .lang-switch button { color: var(--craie-dim); }
  .nav-links .lang-switch button.active { color: var(--charbon); }
  .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; }
  .menu-cat, .menu-cat:nth-child(2n), .menu-cat:nth-child(3n) { transform: none; }
}
@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.3em; text-indent: 0.3em; }
  .menu-item { flex-wrap: wrap; }
  .menu-item .mi-name { white-space: normal; max-width: 75%; }
  .menu-item .mi-dots { min-width: 20px; }
  .menu-cat { padding: 22px 18px 30px; }
  .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%; }
  .img-frame, .img-frame:hover { transform: none; }
  .about-images .img-accent, .about-images .img-accent.visible { transform: none; }
}
/* 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; filter: none; }
  .hero-content > * { opacity: 1; transform: none; filter: none; }
  .hero video { display: none; }
  .hero-facets { display: none; }
}

/* ---------- The reserve badge ---------- */
/* Booking within reach at any depth of the page. The wording turns, the
   flame in the middle does not. A charcoal disc with a hot rim, because the
   page runs dark bands against kraft 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(18, 16, 20, 0.94); border: 1.5px solid var(--braise);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.5), 0 0 24px -4px var(--braise-glow);
}
.reserve-badge svg { position: absolute; inset: 0; animation: spin 14s linear infinite; }
.reserve-badge svg text {
  fill: var(--flamme); font-family: var(--mono); font-weight: 700;
  font-size: 7.6px; 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: 46px; 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(--mono); font-size: 12.5px; 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(--braise-deep); border-bottom-color: var(--braise); }
.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(--braise); }
@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 ember, 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:hover,
.reserve-panel .btn.wa-btn:focus-visible { background: #157a3c; color: #fff; box-shadow: 0 10px 30px -6px rgba(31, 168, 85, 0.5); }

.reserve-panel .btn.wa-btn svg {
  width: 1.2em;
  height: 1.2em;
  fill: currentColor;
  flex: none;
  transform: skewX(7deg);
  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; }