/* Apricot Restaurant & Café design system.
   Everything here is taken off the house itself rather than invented: the
   apricot orange of the wordmark and of the parasols on their own terrace, the
   leaf green of the tree in the logo and of the velvet chairs in the room, the
   teal of the Bouregreg the terrace looks onto, and the sun-bleached ivory of
   a deck at ten in the morning. The house opens at eight and closes at
   midnight, so the page is a daylight page: light ground, dark ink, and two
   bands of dusk where the day ends.

   One motif, used sparingly: the awning. The scalloped edge a canvas parasol
   has, drawn as a border on the two dusk bands, and the stitched seam of that
   canvas, drawn as the dashed keyline inside every button. Nothing else is
   shaped. */

:root {
  --sable: #faf4e8;        /* the deck at mid-morning: the page ground */
  --sable-2: #f3e7d2;      /* deeper sand, for the printed bands */
  --card: #fffdf6;         /* a clean plate: cards and panels */
  --ink: #28311f;          /* leaf ink: the green of the logo, darkened to read */
  --ink-soft: #46503a;
  --para: #5d5c4b;         /* the paragraph voice; warm, never grey */
  --apricot: #e07a28;      /* the fruit, and the parasols */
  --apricot-deep: #b4561a; /* the same fruit where small type needs contrast */
  --apricot-burn: #8f4210; /* prices at 15px on sand clear 4.5:1 here */
  --leaf: #47773b;         /* the tree in the logo. The second voice */
  --leaf-deep: #35592c;
  --river: #1f6072;        /* the Bouregreg at dusk. The evening bands */
  --river-deep: #143d49;   /* the deep water the footer sits on */
  --zest: rgba(224, 122, 40, 0.1);
  --line: rgba(40, 49, 31, 0.16);
  --line-soft: rgba(40, 49, 31, 0.09);
  --on-dusk: #f6ead6;      /* what reads on the river bands */
  --on-dusk-dim: #c8bfa4;
  --dusk-line: rgba(246, 234, 214, 0.18);
  --dusk-line-soft: rgba(246, 234, 214, 0.1);
  --ok: #557a3a;
  --err: #b4502e;

  /* The two printed bands (the carte and the hours) sit on woven canvas
     rather than flat sand: the linen sheet is generated, never photographed. */
  --paper: #f3e7d2;
  --paper-2: #ecdcc0;
  --ink-on-paper: #2c2c18;
  --para-on-paper: #63604a;
  --gold-on-paper: #8f4210;
  --rule-on-paper: rgba(44, 44, 24, 0.18);

  /* Sunlight. One warm wash per light band, each anchored somewhere different
     so no two sections light the same way; the sun moves across the page the
     way it moves across the terrace. */
  --sun-tr: radial-gradient(70% 55% at 88% 0%, rgba(224, 122, 40, 0.1), transparent 70%);
  --sun-tl: radial-gradient(70% 55% at 12% 0%, rgba(224, 122, 40, 0.09), transparent 70%);
  --sun-bc: radial-gradient(85% 60% at 50% 100%, rgba(224, 122, 40, 0.08), transparent 72%);
  --leaf-tl: radial-gradient(70% 55% at 8% 0%, rgba(71, 119, 59, 0.08), transparent 70%);

  --display: 'Aleo', 'Rockwell', Georgia, serif;
  --sans: 'Schibsted Grotesk', 'Segoe UI', system-ui, sans-serif;
  /* Yellowtail is the chalk on the specials board: the note on the programme
     strip, the note beside the hours. It is never used inside a heading. */
  --script: 'Yellowtail', 'Aleo', cursive;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* The scalloped edge of a canvas awning, drawn. Two colour stops so the
     same shape can hang off a light band or a dark one. */
  --scallop-size: 28px 14px;

  /* Very fine woven-canvas grain for the page ground: two thread directions
     at an alpha the eye reads as texture, not pattern. */
  --weave: repeating-linear-gradient(90deg,
      rgba(40, 49, 31, 0.012) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(0deg,
      rgba(40, 49, 31, 0.012) 0 1px, transparent 1px 4px);
}

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

html { scroll-behavior: smooth; }

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

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

/* ---------- Typography ---------- */
/* The wordmark is a warm slab, so the page is too: Aleo carries the same
   rounded-slab genus as the sign over the door, set with weight rather than
   size so it keeps its friendliness at any scale. */
h1, h2, h3 {
  font-family: var(--display);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.08;
}

/* 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(--apricot-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(34px, 4.4vw, 58px);
  margin: 24px 0 0;
  letter-spacing: -0.012em;
  font-weight: 600;
  max-width: 20ch;
}
.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 parasol is canvas, and canvas is stitched: every button is a patch of it,
   softly rounded, with the seam drawn one stitch inside the edge. The dashed
   keyline is the one decoration a button carries, and no sibling site has it.
   ::after draws the stitch so the label never has to fight a border. */
.btn {
  display: inline-block;
  position: relative;
  z-index: 0;
  padding: 17px 42px;
  border: 0;
  border-radius: 12px;
  background: var(--apricot-deep);
  color: #fff8ef;
  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: 5px; pointer-events: none;
  border: 1.5px dashed rgba(255, 248, 239, 0.5);
  border-radius: 8px;
  transition: border-color 0.4s var(--ease);
}
.btn:hover {
  background: var(--ink);
  color: var(--sable);
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(40, 49, 31, 0.22);
}
.btn:hover::after { border-color: rgba(250, 244, 232, 0.4); }

.btn.solid { background: var(--apricot); color: #2c1804; }
.btn.solid::after { border-color: rgba(44, 24, 4, 0.4); }
.btn.solid:hover { background: var(--ink); color: var(--sable); }
.btn.solid:hover::after { border-color: rgba(250, 244, 232, 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(--sable); 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(--sable); }

/* ---------- The bands ---------- */
/* A daylight page divides itself with shadow, not gilt: a soft hairline
   between bands, and each light band carrying its own patch of sun anchored
   somewhere different. Two bands are dusk, and they hang a scalloped awning
   edge over whatever sits above them. */
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(--leaf-tl); }
.programme-section { background-image: var(--sun-bc); }
.gallery-section { background: var(--sable-2); }

/* ---------- Paper ---------- */
/* The carte and the hours are printed things, so they sit on woven canvas: a
   linen sheet warmed a shade past the page, with the sun blown out high
   behind it. Fixed, so the two printed bands read as one cloth 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(44, 44, 24, 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: #4b6b46; }

.paper .hours-list li { border-bottom-color: var(--rule-on-paper); }
.paper .hours-list .day { color: var(--ink-on-paper); }
.paper .hours-list .day-note { color: var(--gold-on-paper); }
.paper .hours-list .dots { border-bottom-color: rgba(44, 44, 24, 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(243, 231, 210, 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(243, 231, 210, 0.4); }
.paper .btn:hover { background: var(--apricot-deep); color: #fff8ef; }
.paper .btn.solid { background: var(--apricot); color: #2c1804; }
.paper .btn.solid::after { border-color: rgba(44, 24, 4, 0.4); }
.paper .btn.solid:hover { background: var(--ink-on-paper); color: var(--paper); }
.paper .btn.solid:hover::after { border-color: rgba(243, 231, 210, 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, 244, 232, 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(40, 49, 31, 0.08);
}
.nav.menu-open, .nav.scrolled.menu-open { backdrop-filter: none; -webkit-backdrop-filter: none; background: transparent; box-shadow: none; }
.nav .container { width: min(1580px, 94vw); }
.nav-inner { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 26px; }
.nav-logo { justify-self: start; grid-column: 1; grid-row: 1; display: flex; align-items: center; }
/* The mark sits transparent, straight on the bar. Over the hero photograph a
   soft shadow lifts it off the picture; once the bar turns ivory on scroll the
   shadow is dropped and the logo reads on its own. */
.nav-logo img {
  height: 60px; width: auto; flex: none;
  filter: drop-shadow(0 2px 10px rgba(10, 20, 24, 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: #fdf8ee;
  opacity: 0.95;
  text-shadow: 0 1px 10px rgba(15, 25, 10, 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 awning again, in miniature: the underline is three little scallops */
.nav-links a::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 2px; height: 5px;
  background: no-repeat center / 100% 100%
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8'%3E%3Cpath d='M2 2c8 6 24 6 32 0 8 6 24 6 32 0 8 6 24 6 32 0' fill='none' stroke='%23e07a28' stroke-width='2' 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(--apricot); }
.nav.scrolled .nav-links a:hover { color: var(--apricot-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(253, 248, 238, 0.6); padding: 10px 22px !important; border-radius: 10px; }
.nav-cta:hover { background: var(--apricot); border-color: var(--apricot); color: #2c1804 !important; }
.nav.scrolled .nav-cta { border-color: var(--line); }
.nav.scrolled .nav-cta:hover { background: var(--apricot); border-color: var(--apricot); color: #2c1804 !important; }
.nav-cta::after { display: none; }

/* Two-state switch with the knob sliding under the active language */
.lang-switch {
  position: relative; display: flex; padding: 3px;
  border: 1px solid rgba(253, 248, 238, 0.35); border-radius: 10px;
}
.nav.scrolled .lang-switch { border-color: var(--line-soft); }
.lang-switch::before {
  content: ''; position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px);
  background: var(--apricot);
  border-radius: 7px;
  transition: transform 0.4s var(--ease);
}
.lang-switch.on-fr::before { transform: translateX(100%); }
.lang-switch button {
  position: relative; z-index: 1; background: transparent; border: 0; color: #fdf8ee;
  font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; padding: 6px 14px;
  transition: color 0.35s;
}
.nav.scrolled .lang-switch button { color: var(--para); }
.lang-switch button.active, .nav.scrolled .lang-switch button.active { color: #2c1804; }

.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: #fdf8ee; transition: 0.4s var(--ease); }
.nav.scrolled .burger span { background: var(--ink); }
.nav.menu-open .burger span { background: var(--ink); }
.burger span:nth-child(1) { top: 0; }
.burger span:nth-child(2) { top: 9px; }
.burger span:nth-child(3) { top: 18px; }
.burger.open span:nth-child(1) { top: 9px; transform: rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { top: 9px; transform: rotate(-45deg); }

/* ---------- Hero ---------- */
.hero {
  height: 100svh; min-height: 660px;
  position: relative; display: grid; place-items: center;
  text-align: center; overflow: hidden; padding: 0;
}
.hero-bg { position: absolute; inset: 0; background: var(--river-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 photograph is the marina and it is the point of
   the hero. A pool of shade under the words, a vignette, and a warm 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(16, 30, 34, 0.62), rgba(16, 30, 34, 0.28) 62%, transparent 80%),
    linear-gradient(180deg, rgba(16, 30, 34, 0.42) 0%, rgba(16, 30, 34, 0.06) 40%, rgba(20, 61, 73, 0.52) 100%);
}
.hero-content { position: relative; z-index: 2; padding: 0 24px; }
/* The house name, set in the slab of the sign over the door. One orchestrated
   arrival, then nothing. */
.hero-script {
  font-family: var(--display);
  font-size: clamp(38px, 6vw, 84px);
  color: #fdf8ee;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.012em;
  max-width: 17ch;
  margin: 0 auto;
  text-shadow: 0 6px 46px rgba(10, 20, 24, 0.65);
}
.hero-tag {
  margin-top: 26px;
  font-family: var(--sans);
  color: #ffd9ae;
  text-shadow: 0 2px 22px rgba(10, 20, 24, 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); letter-spacing: 0.12em; }
  to { opacity: 1; transform: none; letter-spacing: -0.012em; }
}
@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: #ffd9ae;
  text-shadow: 0 2px 18px rgba(10, 20, 24, 0.85);
}
.hero-hours i { display: block; width: 54px; height: 1px; background: currentColor; opacity: 0.55; }
@media (max-width: 700px) { .hero-hours { margin-top: 28px; letter-spacing: 0.26em; text-indent: 0.26em; } }

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); }
.reveal.visible { opacity: 1; transform: none; }
.reveal-left { opacity: 0; transform: translateX(-70px); transition: opacity 1.3s var(--ease), transform 1.3s var(--ease); }
.reveal-left.visible { opacity: 1; transform: none; }
.reveal[data-delay='1'], .reveal-left[data-delay='1'] { transition-delay: 0.12s; }
.reveal[data-delay='2'], .reveal-left[data-delay='2'] { transition-delay: 0.24s; }
.reveal[data-delay='3'], .reveal-left[data-delay='3'] { transition-delay: 0.36s; }

/* ---------- The frame ---------- */
/* Photographs are prints laid on the deck: a thick plate of ivory around each
   one, rounded like everything the house touches, lifted on a soft noon
   shadow. Hover lifts the print, never draws on it. */
.img-frame {
  position: relative; overflow: hidden; border-radius: 18px;
  border: 8px solid var(--card);
  box-shadow: 0 18px 44px rgba(40, 49, 31, 0.16);
  transition: transform 0.7s var(--ease), box-shadow 0.7s var(--ease);
}
.img-frame img { transition: transform 1.4s var(--ease); border-radius: 10px; }
.img-frame:hover { transform: translateY(-4px); box-shadow: 0 26px 60px rgba(40, 49, 31, 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(40, 49, 31, 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(--sable); }
.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(--sable); background: var(--ink); }
.menu-cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(38px, 4vw, 64px) clamp(44px, 6vw, 96px); align-items: start; }
@media (min-width: 1500px) { .menu-cols { grid-template-columns: repeat(3, 1fr); } }
/* min-width:0 stops a long, un-wrapping dish name from forcing its 1fr track
   wider than the container and blowing the whole grid past the page edge. */
.menu-cat { break-inside: avoid; min-width: 0; }
/* The carte's headings, set the way the printed carte sets them: the name in
   the slab over its column, the note under it in the hand, one rule closing
   the block. */
.cat-head {
  text-align: center;
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.menu-cat h3 {
  font-family: var(--display);
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.26em; text-indent: 0.26em;
  color: var(--ink);
  line-height: 1.5;
  margin: 0;
}
.menu-cat-sub {
  font-family: var(--display);
  font-style: italic;
  color: var(--apricot-deep);
  font-size: 14.5px;
  line-height: 1.4;
  margin: 7px 0 0;
}
.menu-item { display: flex; align-items: baseline; gap: 10px; padding: 7px 0; }
/* Names wrap when they must: some dishes carry a gloss ("Khlii tagine with
   eggs · cured beef") that is far too long to hold on one line in a column. */
.menu-item .mi-name { font-family: var(--display); font-size: 16.5px; font-weight: 500; color: var(--ink); white-space: normal; overflow-wrap: anywhere; }
.menu-item .mi-dots { flex: 1; min-width: 18px; border-bottom: 1px dotted rgba(93, 92, 75, 0.4); transform: translateY(-5px); }
.menu-item .mi-price { font-family: var(--display); font-style: italic; color: var(--apricot-burn); font-size: 15.5px; white-space: nowrap; }
.menu-item-desc { color: var(--para); opacity: 0.82; font-size: 13.5px; margin: -4px 0 8px; max-width: 88%; }
.menu-actions { text-align: center; margin-top: 50px; }
.menu-page { padding-top: clamp(46px, 5vw, 76px); }
.menu-page .promo-notice { margin-bottom: 24px; }

/* Sold by the glass and by the bottle: one row, two price columns */
.menu-cat.two-way .mi-price { width: 5.6em; text-align: right; }
.menu-cat.two-way .mi-price.alt { width: 6.2em; }
.menu-item.mi-head { padding: 0 0 5px; border-bottom: 1px solid var(--line-soft); margin-bottom: 5px; }
.menu-item.mi-head .mi-price {
  font-family: var(--sans); font-weight: 600; font-style: normal;
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--para); opacity: 0.75;
}

/* ---------- The formules ---------- */
/* Golden hour: the one band on the page that is pure apricot, because the
   formules are the house's signature and the parasols are the house's colour.
   The scalloped awning edge hangs off its top, and the list sits on a plate
   of ivory the way the tray arrives. */
.formule {
  background:
    radial-gradient(90% 80% at 85% 10%, rgba(255, 226, 178, 0.5), transparent 60%),
    linear-gradient(112deg, #e07a28 0%, #d96b22 46%, #c05a17 100%);
}
.formule::before {
  height: 14px;
  background:
    radial-gradient(circle at 14px 0, var(--paper) 13px, transparent 14px) repeat-x !important;
  background-size: var(--scallop-size) !important;
  top: -1px;
}
.formule .kicker { color: #59300b; }
.formule .kicker::after { background: rgba(44, 24, 4, 0.25); }
.formule .section-title { color: #2c1804; }
.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: #4a2a0c; margin-bottom: 26px; max-width: 44ch; }
.formule-time {
  font-family: var(--script); font-size: 27px;
  color: #59300b; margin: 18px 0 !important;
}
.formule-copy .btn { margin-top: 8px; background: #2c1804; color: #ffd9ae; }
.formule-copy .btn::after { border-color: rgba(255, 217, 174, 0.4); }
.formule-copy .btn:hover { background: var(--card); color: #2c1804; }
.formule-copy .btn:hover::after { border-color: rgba(44, 24, 4, 0.35); }
/* The tray: an ivory plate with the stitch inside it */
.formule-list {
  position: relative;
  background: var(--card);
  border-radius: 18px;
  box-shadow: 0 26px 60px rgba(90, 40, 5, 0.3);
  padding: clamp(30px, 3.4vw, 46px) clamp(26px, 3vw, 42px);
}
.formule-list::after {
  content: ''; position: absolute; inset: 9px; pointer-events: none;
  border: 1.5px dashed rgba(180, 86, 26, 0.28);
  border-radius: 12px;
}
.fm-row { display: flex; align-items: baseline; gap: 12px; padding: 10px 0; }
.fm-name { font-family: var(--display); font-weight: 600; font-size: 17px; color: var(--ink); }
.fm-dots { flex: 1; border-bottom: 1px dotted rgba(93, 92, 75, 0.38); transform: translateY(-4px); }
.fm-price { font-family: var(--display); font-style: italic; font-size: 16px; color: var(--apricot-burn); white-space: nowrap; }
.formule-list .menu-item-desc { color: var(--para); }
@media (max-width: 900px) { .formule-inner { grid-template-columns: 1fr; } }

/* ---------- La semaine ---------- */
/* Seven days, read straight off the opening hours the owner keeps in the
   panel. A tide table more than a bill: the hours hold steady and the note
   under each day is the thing worth coming for. */
.programme-section { background: var(--sable); }
.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(40, 49, 31, 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(31, 96, 114, 0.08); }
.prog-day.today::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--apricot);
}
.prog-name {
  display: block; font-family: var(--sans); font-weight: 600; font-size: 11.5px;
  text-transform: uppercase; letter-spacing: 0.18em; text-indent: 0.18em;
  color: var(--ink);
}
.prog-hours { display: block; font-size: 12.5px; color: var(--para); opacity: 0.75; margin-top: 8px; letter-spacing: 0.06em; }
.prog-note {
  display: block; font-family: var(--script); font-size: 24px; line-height: 1.2;
  color: var(--apricot-deep); margin-top: 16px; min-height: 34px;
}
.prog-note:empty::before { content: '·'; opacity: 0.3; }
.prog-day.shut .prog-hours { color: var(--err); opacity: 0.9; }
@media (max-width: 1100px) { .programme-grid { grid-template-columns: repeat(4, 1fr); border-bottom: 0; } .prog-day { border-bottom: 1px solid var(--line-soft); } }
@media (max-width: 620px) { .programme-grid { grid-template-columns: repeat(2, 1fr); } .prog-note { font-size: 21px; } }

/* ---------- Spaces ---------- */
.spaces-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.space-card {
  position: relative; overflow: hidden; aspect-ratio: 3 / 4.2;
  border-radius: 18px;
  box-shadow: 0 16px 40px rgba(40, 49, 31, 0.14);
}
.space-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.space-card:hover img { transform: scale(1.07); }
.space-card::before {
  content: ''; position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(180deg, transparent 48%, rgba(20, 61, 73, 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: #fdf8ee;
  text-shadow: 0 1px 12px rgba(10, 20, 24, 0.6);
}
.space-card figcaption small:empty { display: none; }
.space-card figcaption small {
  display: block;
  font-family: var(--script); font-weight: 400;
  font-size: 19px; letter-spacing: 0.02em; text-indent: 0; text-transform: none;
  color: #ffd9ae; margin-top: 7px; line-height: 1.4;
}

/* ---------- Gallery ---------- */
/* Six pictures on a three by three grid: the lead takes four cells, the rest
   take one each, every cell the same 16:10 so the set reads as one edit. */
.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: 14px;
  box-shadow: 0 10px 30px rgba(40, 49, 31, 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, 61, 73, 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(--apricot); color: var(--apricot); }
.lb-close { top: 26px; right: 26px; }
.lb-prev { left: 26px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 26px; top: 50%; transform: translateY(-50%); }

/* ---------- Hours / contact / map ---------- */
.info-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(40px, 5vw, 80px); align-items: stretch; }
.info-grid.no-map { grid-template-columns: 1fr; max-width: 640px; }
.hours-list { list-style: none; margin-top: 8px; }
.hours-list li { display: flex; align-items: baseline; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--line-soft); font-size: 15px; }
.hours-list .day-col { min-width: 160px; display: flex; flex-direction: column; gap: 3px; }
.hours-list .day { font-family: var(--sans); font-weight: 600; text-transform: uppercase; letter-spacing: 0.16em; text-indent: 0.16em; font-size: 11.5px; color: var(--ink); }
.hours-list .day-note { font-family: var(--script); font-size: 20px; line-height: 1.15; color: var(--apricot-deep); }
.hours-list .dots { flex: 1; border-bottom: 1px dotted rgba(93, 92, 75, 0.32); transform: translateY(-4px); }
.hours-list .time { color: var(--ink-soft); letter-spacing: 0.06em; }
.hours-list .closed { color: var(--err); font-family: var(--display); font-style: italic; }
.contact-lines { margin-top: 30px; display: grid; gap: 12px; color: var(--para); font-size: 15px; }
.contact-lines a:hover { color: var(--apricot-deep); }
.contact-lines strong { color: var(--apricot-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, 244, 232, 0.8); color: var(--para); }
#map .leaflet-control-attribution a { color: var(--apricot-deep); }
#map .leaflet-bar a { background: var(--card); color: var(--ink); border-bottom-color: var(--line); }
#map .leaflet-bar a:hover { background: var(--sable-2); color: var(--apricot-deep); }
.map-pin { position: relative; width: 22px; height: 22px; }
.map-pin::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: var(--apricot); border: 3px solid var(--card);
  box-shadow: 0 2px 12px rgba(40, 49, 31, 0.4);
}
.map-pin::after {
  content: ''; position: absolute; inset: -12px; border-radius: 50%;
  border: 2px solid var(--apricot);
  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(--apricot-deep); font-weight: 500; }

/* ---------- Reservation ---------- */
/* Dusk on the water: the terrace photograph under a river-teal veil, and the
   form on a plate of ivory in the middle of it. */
.reserve-section {
  background:
    linear-gradient(rgba(20, 61, 73, 0.78), rgba(16, 45, 55, 0.86)),
    url('../images/space-restaurant.jpg') center/cover fixed;
}
.reserve-panel {
  position: relative;
  max-width: 780px; margin: 0 auto;
  background: var(--card);
  border-radius: 22px;
  color: var(--para);
  box-shadow: 0 34px 90px rgba(8, 24, 30, 0.5);
  padding: clamp(36px, 5vw, 68px);
}
.reserve-panel::after {
  content: ''; position: absolute; inset: 11px; pointer-events: none;
  border: 1.5px dashed rgba(180, 86, 26, 0.22);
  border-radius: 14px;
}
.reserve-panel > * { position: relative; z-index: 1; }
.reserve-panel .kicker { color: var(--apricot-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(--apricot-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(--apricot-deep); }
.form-field input, .form-field select {
  background: var(--sable);
  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(--apricot); }
.form-field input::placeholder { color: rgba(93, 92, 75, 0.5); }
.form-field select {
  background-image: linear-gradient(45deg, transparent 50%, var(--apricot-deep) 50%), linear-gradient(135deg, var(--apricot-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, 92, 75, 0.7); letter-spacing: 0.02em; }
.prefill-note { color: var(--apricot-deep); font-size: 13px; margin-top: 12px; }

/* ---------- Footer ---------- */
/* The deep water the evening ends on. The awning edge hangs off its top. */
footer {
  background:
    radial-gradient(80% 70% at 12% 0%, rgba(31, 96, 114, 0.55), transparent 66%),
    var(--river-deep);
  color: var(--on-dusk-dim);
  padding: 90px 0 34px;
}
footer::before {
  background: linear-gradient(90deg, transparent, var(--dusk-line) 18%, var(--dusk-line) 82%, transparent);
}
.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(--apricot);
}
.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(--apricot); }
.footer-grid ul { display: grid; gap: 12px; }
.footer-logo {
  height: 62px; width: auto; margin-bottom: 20px;
  /* Transparent on the deep teal; a faint light halo keeps the darker part of
     the wordmark from sinking into the ground. */
  filter: drop-shadow(0 0 1px rgba(246, 234, 214, 0.55)) drop-shadow(0 2px 8px rgba(0, 0, 0, 0.35));
}
.socials { display: flex; gap: 14px; margin-top: 26px; }
/* The mark is the button. No frame, no tint, no filter: these are the
   official logos and they are recognised by their colour. */
.socials a {
  width: 46px; height: 46px; display: block; border-radius: 10px;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.socials a img { width: 100%; height: 100%; object-fit: contain; display: block; }
.socials a:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4); }
.footer-bottom {
  border-top: 1px solid var(--dusk-line-soft); padding-top: 28px;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  color: var(--on-dusk-dim); opacity: 0.9; font-size: 13.5px; letter-spacing: 0.05em;
}
.footer-bottom a:hover { color: var(--apricot); }

/* ---------- 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(16, 30, 34, 0.6) 0%, rgba(16, 30, 34, 0.42) 45%, rgba(20, 61, 73, 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(38px, 5.6vw, 68px); position: relative; z-index: 2; letter-spacing: -0.012em; color: #fdf8ee; text-shadow: 0 6px 40px rgba(10, 20, 24, 0.6); }
.page-hero .kicker { position: relative; z-index: 2; color: #ffd9ae; }
.page-hero .kicker::after, .page-hero .kicker::before { background: rgba(253, 248, 238, 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(--apricot-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(40, 49, 31, 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(253, 248, 238, 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(--apricot); border-color: var(--apricot); color: #2c1804 !important; }
.nav-auth.signed-in { border-color: var(--apricot); color: var(--apricot) !important; }
.nav.scrolled .nav-auth.signed-in { color: var(--apricot-deep) !important; border-color: var(--apricot-deep); }
.nav-auth.signed-in:hover { background: var(--apricot); border-color: var(--apricot); color: #2c1804 !important; }

.page-account { background: var(--river-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(16, 45, 55, .66), rgba(16, 45, 55, .8) 55%, rgba(12, 32, 40, .92));
}
.page-account .nav {
  background: rgba(250, 244, 232, 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: #2c1804; }
.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(12, 32, 40, .6); }
.page-account footer::before { display: none; }

.auth-wrap { display: flex; justify-content: center; width: 100%; }
.auth-card {
  position: relative;
  width: min(580px, 100%); background: var(--card); border: 1px solid var(--line-soft);
  border-radius: 22px; padding: 34px 36px; text-align: center;
  box-shadow: 0 34px 80px rgba(8, 24, 30, 0.45);
}
.auth-card::after { content: ''; position: absolute; inset: 9px; pointer-events: none; border: 1.5px dashed rgba(180, 86, 26, 0.16); border-radius: 15px; }
.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(--apricot-deep); margin-top: 8px;
}
.auth-form input {
  width: 100%; background: var(--sable); 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(--apricot); }
.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(--sable); 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(--apricot); }
.gender-row button.active { border-color: var(--apricot); background: var(--zest); color: var(--apricot-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(--apricot-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(--sable); 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(--apricot-deep) 50%),
                    linear-gradient(135deg, var(--apricot-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(--apricot); }
.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(--apricot-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(--apricot); 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(--apricot-deep); text-decoration: underline; white-space: nowrap; }
.forgot-link:hover { color: var(--ink); }
.birthday-note {
  font-size: 12px; color: var(--apricot-deep); margin-top: 10px; text-align: center;
  background: var(--zest); border: 1px solid var(--line-soft); border-radius: 10px; padding: 10px 12px;
}

.member-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; margin: 28px 0 42px; }
.member-card {
  background: var(--card);
  border: 1px solid var(--line-soft); border-radius: 18px; padding: 28px;
  box-shadow: 0 20px 50px rgba(8, 24, 30, 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(--apricot), #c05a17 62%, #8f4210); border: 0; }
.fidelity-card .kicker { display: block; margin-bottom: 8px; color: #59300b; }
.fidelity-card b { font-family: var(--display); font-size: 56px; font-weight: 600; color: #2c1804; line-height: 1; }
.fidelity-card p { color: #4a2a0c; font-size: 13px; margin-top: 12px; line-height: 20px; }
.fidelity-card.off b { color: #4a2a0c; opacity: 0.6; }

.member-heading { font-family: var(--display); font-size: 24px; font-weight: 600; margin-bottom: 18px; color: #fdf8ee; }
.res-list { display: grid; gap: 12px; }
.res-card {
  display: flex; align-items: center; gap: 18px; background: var(--card);
  border: 1px solid var(--line-soft); border-radius: 16px; padding: 17px 22px;
  box-shadow: 0 14px 36px rgba(8, 24, 30, 0.3);
}
.res-when { display: grid; min-width: 92px; }
.res-when b { font-family: var(--display); font-size: 20px; font-weight: 600; color: var(--apricot-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(--apricot-deep); border-color: rgba(180, 86, 26, 0.5); }
.res-badge.confirmed { color: var(--ok); border-color: rgba(85, 122, 58, 0.5); }
.res-badge.cancelled { color: var(--err); border-color: rgba(180, 80, 46, 0.5); }

.hidden { display: none !important; }

/* ---------- Contact band ---------- */
/* Sunset over the water: the terrace photograph under a warm dusk veil. */
.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(16, 45, 55, .82), rgba(84, 44, 16, .58) 55%, rgba(16, 45, 55, .86));
}
.contact-band > .container { position: relative; z-index: 1; }
.contact-inner { text-align: center; max-width: 1080px; margin: 0 auto; }
.contact-inner .kicker { color: #ffd9ae; }
.contact-inner .kicker::before, .contact-inner .kicker::after { background: rgba(253, 248, 238, 0.28); }
.contact-inner .section-title { font-size: clamp(36px, 4.8vw, 56px); color: #fdf8ee; }
.contact-lead { color: rgba(253, 248, 238, 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, 244, 232, 0.94); border: 0; border-radius: 16px;
  padding: 19px 21px;
  box-shadow: 0 14px 38px rgba(8, 24, 30, 0.35);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
a.contact-card:hover { transform: translateY(-3px); box-shadow: 0 22px 50px rgba(8, 24, 30, 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(180, 86, 26, 0.24);
}
.cc-icon svg { width: 16px; height: 16px; fill: var(--apricot-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(--apricot-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: #fdf8ee; box-shadow: inset 0 0 0 1.5px rgba(253, 248, 238, 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: #fdf8ee; }
.deals-main .section-head .section-sub { color: rgba(253, 248, 238, 0.8); }
.deals-empty {
  background: var(--card); border: 1px solid var(--line-soft); border-radius: 18px;
  padding: 44px 32px; text-align: center; color: var(--para); max-width: 580px; margin: 0 auto;
  box-shadow: 0 20px 50px rgba(8, 24, 30, 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: #ffd9ae; 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(180, 86, 26, .2); border-radius: 16px;
  padding: 15px;
  box-shadow: 0 14px 36px rgba(8, 24, 30, 0.3);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.deal-card:hover { transform: translateY(-3px); box-shadow: 0 22px 48px rgba(8, 24, 30, 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(--apricot-deep); font-size: 18px; font-weight: 600; }
.deal-badge {
  position: absolute; top: 12px; right: 12px; background: var(--zest);
  color: var(--apricot-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(--apricot) !important; }
.nav.scrolled .nav-deals { color: var(--apricot-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(--apricot-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(--apricot); }
.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(--sable); 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(--apricot); }
.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(--apricot-deep);
  transition: transform 0.3s var(--ease);
}
.timepick-btn.open .tp-caret { transform: rotate(180deg); }
.timepick-btn svg { width: 16px; height: 16px; fill: var(--apricot-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(40, 49, 31, 0.25);
}
.timepick-panel[hidden] { display: none; }
.timepick-slot {
  background: var(--sable); 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(--apricot); }
.timepick-slot.on { background: var(--ink); color: var(--sable); 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(--sable); 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(--apricot);
  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(--leaf-deep);
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  overflow: hidden; padding: 9px 0;
}
.promo-track {
  display: flex; width: max-content;
  animation-name: promo-scroll; animation-timing-function: linear; animation-iteration-count: infinite;
  will-change: transform;
}
.promo-banner:hover .promo-track { animation-play-state: paused; }
.promo-banner-text {
  flex: none; white-space: nowrap; padding-right: 5rem;
  color: #f2f0e4; font-weight: 600;
  font-family: var(--sans); font-size: 13.5px; letter-spacing: 0.14em; text-decoration: none;
  text-transform: uppercase;
}
a.promo-banner-text:hover { color: #ffd9ae; }
@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(--leaf-deep); color: #f2f0e4; font-weight: 600;
  border-radius: 12px; padding: 12px 28px;
  font-family: var(--sans); text-align: center; font-size: 13.5px; letter-spacing: 0.12em; text-transform: uppercase;
}
.promo-notice.hidden { display: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .spaces-grid { grid-template-columns: repeat(3, 1fr); }
  .menu-cols { grid-template-columns: 1fr; }
}
/* Six links plus the switch, the booking button and two account links do not
   fit a laptop bar. Below this the whole lot moves into the burger panel. */
@media (max-width: 1240px) {
  .nav-logo img { height: 48px; }
  .nav.scrolled .nav-logo img { height: 42px; }
  .nav-links {
    position: fixed; inset: 0; height: 100svh;
    background: var(--sable);
    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(--apricot); padding: 14px 30px !important; color: var(--apricot-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: #2c1804; }
  .nav-links.open li { animation: navItemIn 0.55s var(--ease) forwards; }
  .nav-links.open li:nth-child(1) { animation-delay: 0.08s; }
  .nav-links.open li:nth-child(2) { animation-delay: 0.14s; }
  .nav-links.open li:nth-child(3) { animation-delay: 0.2s; }
  .nav-links.open li:nth-child(4) { animation-delay: 0.26s; }
  .nav-links.open li:nth-child(5) { animation-delay: 0.32s; }
  .nav-links.open li:nth-child(6) { animation-delay: 0.38s; }
  .nav-links.open li:nth-child(7) { animation-delay: 0.44s; }
  .nav-links.open li:nth-child(8) { animation-delay: 0.5s; }
  .nav-right { display: none; }
  .nav-links .mobile-only { display: block; }
  .burger { display: block; }
  .nav-simple .nav-links {
    position: static; height: auto; background: none;
    flex-direction: row; clip-path: none; visibility: visible; gap: 18px; z-index: auto;
  }
  .nav-simple .nav-links li { opacity: 1; transform: none; }
  .nav-simple .nav-links a { font-size: 11px; letter-spacing: 0.18em; text-indent: 0.18em; }
}
@media (max-width: 900px) {
  .about-grid, .info-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  #map { min-height: 340px; }
  .footer-grid { grid-template-columns: 1fr; gap: 34px; }
  /* iOS ignores background-attachment: fixed; keep these bands readable */
  #menu.menu-section, .reserve-section, .contact-band, body { background-attachment: scroll; }
  section.paper { background-attachment: scroll, scroll; }
}
@media (min-width: 901px) { .nav-links .mobile-only { display: none; } }
@media (max-width: 560px) {
  .spaces-grid { grid-template-columns: 1fr; }
  .space-card { aspect-ratio: 16 / 11; }
  .hero-actions .btn { width: 100%; text-align: center; }
  .hero-tag { letter-spacing: 0.34em; text-indent: 0.34em; }
  .menu-item { flex-wrap: wrap; }
  .menu-item .mi-name { white-space: normal; max-width: 75%; }
  .menu-item .mi-dots { min-width: 20px; }
  .menu-cat.two-way .menu-item { flex-wrap: nowrap; align-items: baseline; }
  .menu-cat.two-way .mi-name { min-width: 0; max-width: none; flex: 1 1 auto; }
  .menu-cat.two-way .mi-dots { flex: 0 1 18px; min-width: 0; }
  .menu-cat.two-way .mi-price { flex: none; width: 3.6em; }
  .menu-cat.two-way .mi-price.alt { width: 4.4em; }
  .menu-cat.two-way .mi-head .mi-price { font-size: 8.5px; letter-spacing: 0.06em; }
}
@media (max-width: 720px) {
  .account-main { padding: 110px 0 50px; min-height: auto; }
  .nav-auth { padding: 8px 14px !important; font-size: 11px; }
  .auth-card { padding: 26px 20px; }
  #signupForm { grid-template-columns: 1fr; }
  .res-card { flex-wrap: wrap; gap: 10px; }
  .res-when { min-width: 70px; }
  .contact-band { padding: 72px 0; }
  .contact-cards { grid-template-columns: minmax(0, 1fr); }
  .contact-actions .btn { width: 100%; }
}
/* On a short screen, centring a tall card pushes it below the fold */
@media (max-height: 900px) { .account-main { align-items: flex-start; padding-top: 88px; } }

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

/* ---------- The reserve badge ---------- */
/* Booking within reach at any depth of the page. The wording turns; the tree
   in the middle does not, which is the whole trick. The plate behind it is
   not decoration: the page runs light bands against dusk 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, 246, 0.9); border: 1px solid var(--line-soft);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 12px 34px rgba(40, 49, 31, 0.2);
}
.reserve-badge svg { position: absolute; inset: 0; animation: spin 14s linear infinite; }
.reserve-badge svg text {
  fill: var(--apricot-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(--apricot-deep); border-bottom-color: var(--apricot); }
.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 apricot, 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; }