/* La Cerveceria design system.
   Everything here is taken off the house's own identity rather than invented:
   the badge is a rope hexagon on harbour navy, the stripes are the awning the
   badge sits on, the cream is the sail the mark is drawn in, the gold is the
   beer the name promises. Type follows the badge: a slab letterpress face for
   everything that names something, a working sans for everything functional,
   and a sign-painter script kept for one job only.

   One motif, and it is used once rather than everywhere: the banderole. The
   ribbon that carries "TAPAS & COCKTAILS" through the badge is the shape every
   button takes, and that is all. A ribbon repeated behind every heading stops
   being a signature and becomes bunting. Everything else earns its place by
   holding type or holding a photograph. */

:root {
  --ink: #101820;         /* the harbour navy the badge is printed on */
  --ink-2: #0a1016;       /* the deepest band */
  --panel: #16212b;       /* a card on the navy */
  --panel-2: #1c2a36;
  --pearl: #f0e8d3;       /* the sail cream of the mark, and every action */
  --pearl-dim: #d2c9ad;
  /* The paragraph voice: harbour grey-blue, never pure grey, which goes
     green against the navy. */
  --para: #a9b4bd;
  --brass: #d9a441;       /* the beer gold. The second voice, never the first */
  --brass-soft: rgba(217, 164, 65, 0.13);
  --wine: #9e3527;        /* Spanish vermilion. Surfaces and the promo strip only */
  --on-pearl: #101820;    /* what sits on top of a cream fill */
  --line: rgba(240, 232, 211, 0.16);
  --line-soft: rgba(240, 232, 211, 0.08);
  --ok: #8fae8b;
  --err: #dfa39c;

  /* The paper. Two bands of the site are printed rather than lit: the carte and
     the hours. The cream of the printed menu, never white, with the harbour
     navy as the ink and a darker gold that still has contrast on it. */
  --paper: #f2ecdc;
  --paper-2: #e9e0c9;
  --ink-on-paper: #1b2733;
  --para-on-paper: #4c5a66;
  /* Gold has to go darker on a light ground than it does on a dark one or it
     stops being readable: the prices are set in it at 15px, and the champagne
     sheet has fibre in it that runs down to 206. This clears 5:1 against the
     darkest part of the sheet. */
  --gold-on-paper: #7a5a14;
  --rule-on-paper: rgba(27, 39, 51, 0.16);

  /* Gilt. Brass at the alpha where it warms a black ground without ever
     becoming a gold panel: one wash per band, anchored somewhere different in
     each so no two dark sections light the same way. */
  --gilt-tr: radial-gradient(75% 60% at 90% 0%, rgba(217, 164, 65, 0.20), transparent 72%);
  --gilt-tl: radial-gradient(75% 60% at 10% 0%, rgba(217, 164, 65, 0.18), transparent 72%);
  --gilt-bc: radial-gradient(85% 65% at 50% 100%, rgba(217, 164, 65, 0.18), transparent 74%);
  --gilt-sweep: linear-gradient(104deg, transparent 6%, rgba(217, 164, 65, 0.16) 46%, transparent 84%);
  /* Light spilling down from the rule that closes the band above. This is the
     part that actually reads as gold; the radials only warm the corners. */
  --gilt-spill: linear-gradient(180deg, rgba(217, 164, 65, 0.17), rgba(217, 164, 65, 0.05) 9%, transparent 20%);
  /* The rule that closes each band: a hairline that fades out at both ends
     rather than running wall to wall, so it reads as struck rather than drawn. */
  --gilt-rule: linear-gradient(90deg, transparent, rgba(217, 164, 65, 0.5) 18%, rgba(217, 164, 65, 0.5) 82%, transparent);

  --display: 'Graduate', 'Rockwell', Georgia, serif;
  --sans: 'Work Sans', 'Segoe UI', system-ui, sans-serif;
  /* Yellowtail means one thing on this site and one thing only: what plays
     tonight. The night on the programme strip, the night beside the hours.
     It is never used as decoration inside a heading. */
  --script: 'Yellowtail', cursive;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* The awning. The badge sits on wide navy-and-cream stripes, so the dark
     bands of the page carry the same rhythm at a whisper: a broad stripe you
     feel rather than read. Drawn, so it costs nothing and holds at any width. */
  --slats: repeating-linear-gradient(90deg,
    rgba(240, 232, 211, 0.015) 0 44px,
    rgba(0, 0, 0, 0.09) 44px 46px,
    rgba(0, 0, 0, 0.026) 46px 88px,
    rgba(240, 232, 211, 0.006) 88px 90px);
  --lamp: radial-gradient(closest-side at 82% -6%,
    rgba(217, 164, 65, 0.16), rgba(217, 164, 65, 0.05) 55%, transparent 100%);
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--lamp), var(--slats), var(--ink);
  background-attachment: fixed, scroll, scroll;
  color: var(--para);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* Bands that paint their own solid ground lose the battens, so they carry them */
.menu-section:not(.paper), footer, .programme-section { background-image: var(--slats); }

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

::selection { background: var(--pearl); color: var(--on-pearl); }

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

/* ---------- Typography ---------- */
/* The wordmark is letterpress slab caps on a badge, so the headings are too:
   Graduate, worn like stencilled crate lettering. It ships a single 400, so
   nothing here may ask for more or the browser fakes a bold and the slab
   serifs clog. Air between the letters, not weight, is what makes it carry. */
h1, h2, h3 {
  font-family: var(--display);
  font-weight: 400;
  color: var(--pearl);
  line-height: 1.14;
}

/* The eyebrow states a fact about the house, never a mood word, and it rides
   a hairline that runs out to the end of the measure. The heading sits under
   it, left. A page whose every band is a centred stack of kicker, title and
   flourish reads as a template however good the parts are; this is the one
   device that carries the whole page, and it does not repeat itself. */
.kicker {
  display: flex; align-items: center; gap: 20px;
  font-family: var(--sans); font-weight: 500;
  font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--pearl-dim); line-height: 1;
}
/* The rule the eyebrow rides is ticked rather than solid: the rhythm of the
   whipping on a mooring rope, quieter than a drawn line. */
.kicker::after { content: ''; flex: 1; height: 1px;
  background: repeating-linear-gradient(90deg, var(--line) 0 7px, transparent 7px 14px); }
/* Centred heads take the rule on both sides, so the device is the same one */
.section-head.center .kicker::before { content: ''; flex: 1; height: 1px;
  background: repeating-linear-gradient(90deg, var(--line) 0 7px, transparent 7px 14px); }

.section-title {
  font-size: clamp(29px, 3.8vw, 52px);
  margin: 26px 0 0;
  letter-spacing: 0.02em;
  font-weight: 400;
  max-width: 24ch;
}
.section-head.center .section-title { max-width: none; }
.section-sub { color: var(--para); max-width: 58ch; font-size: 16px; margin-top: 20px; }
.section-head.center .section-sub { max-width: 66ch; }

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

/* ---------- Layout ---------- */
.container { width: min(1200px, 90vw); margin: 0 auto; }
section { padding: clamp(88px, 10vw, 158px) 0; position: relative; }
.section-head { margin-bottom: clamp(40px, 5vw, 68px); }
.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. Quiet, always
   there, and the kind of thing a printed carte does that a website rarely
   bothers with. Desktop only, and never over the mobile menu. */
.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: 500;
  font-size: 10.5px; letter-spacing: 0.4em; text-transform: uppercase;
  color: var(--pearl-dim); opacity: 0.5;
  pointer-events: none;
}
@media (max-width: 1400px) { .side-rail { display: none; } }

/* ---------- Buttons ---------- */
/* Every button is a banderole: the ribbon that carries "TAPAS & COCKTAILS"
   through the badge, with its two ends cut in a swallowtail notch. A rectangle
   reads as a default and a pill reads as everybody else's; a ribbon reads as
   this house.

   clip-path cuts the notches, so the outline is not a border at all. The
   element's own background IS the rule, and ::after lays the face one pixel
   inside it, clipped to the same shape, which gives the double-line the
   photographs on this site are framed with, at button scale.
   The z-index: 0 is load-bearing: it makes the button a stacking context so the
   negative-z face paints above the button's background and below its label,
   instead of vanishing behind the section. */
.btn {
  --c: 9px;
  --cut: polygon(0 0, 100% 0, calc(100% - var(--c)) 50%, 100% 100%,
                 0 100%, var(--c) 50%);
  display: inline-block;
  position: relative;
  z-index: 0;
  padding: 17px 48px;
  border: 0;
  border-radius: 0;
  background: rgba(240, 232, 211, 0.6);
  clip-path: var(--cut);
  color: var(--pearl);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  text-indent: 0.18em;
  font-size: 11.5px;
  font-weight: 500;
  text-align: center;
  transition: color 0.45s var(--ease), background 0.45s var(--ease);
}
.btn::after {
  content: '';
  position: absolute; inset: 1px; z-index: -1;
  background: rgba(10, 16, 22, 0.8);
  clip-path: var(--cut);
  transition: background 0.45s var(--ease);
}
.btn:hover { color: var(--on-pearl); background: var(--pearl); }
.btn:hover::after { background: var(--pearl); }

.btn.solid { background: var(--pearl); color: var(--on-pearl); font-weight: 600; }
.btn.solid::after { background: var(--pearl); }
.btn.solid:hover { background: var(--brass); color: var(--brass); }
.btn.solid:hover::after { background: rgba(10, 16, 22, 0.72); }

.btn.ghost { background: rgba(240, 232, 211, 0.3); color: var(--para); }
.btn.ghost:hover { background: var(--pearl); color: var(--on-pearl); }

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

.btn.danger { background: var(--wine); color: #fff; }
.btn.danger::after { background: var(--wine); }
.btn.danger:hover { background: var(--err); color: var(--err); }
.btn.danger:hover::after { background: rgba(10, 16, 22, 0.72); }

/* The same cut, smaller, on the two chips in the bar and on the carte's tabs,
   so one shape runs through everything that can be pressed. */
.nav-cta, .nav-auth, .menu-tabs button {
  --c: 7px;
  --cut: polygon(0 0, 100% 0, calc(100% - var(--c)) 50%, 100% 100%,
                 0 100%, var(--c) 50%);
  clip-path: var(--cut);
  border-radius: 0;
}


/* ---------- The bands ---------- */
/* The page was ten sections of the same near-black in a row, which reads as one
   long tunnel however good each section is. Three things break it: a hairline
   of gilt struck between every band, a wash of brass anchored somewhere
   different in each dark one, and two bands that are printed on paper rather
   than lit. */
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: var(--gilt-rule); z-index: 2;
}
/* Photo-backed bands paint their own scrim over the top edge, so the rule goes
   above it rather than under. Hero has nothing above it to be divided from. */
.hero::before { display: none; }

#about { background-image: var(--gilt-spill), var(--gilt-tr); }
#spaces { background-image: var(--gilt-spill), var(--gilt-tl); }
.programme-section { background-image: var(--gilt-spill), var(--gilt-bc), var(--slats); }
footer { background-image: var(--gilt-spill), var(--gilt-tl), var(--slats); }
/* The gallery stays the deepest band on the page: the photographs are the
   light in it, and a wash behind them only takes contrast away. */
.gallery-section { background-image: linear-gradient(180deg, rgba(217, 164, 65, 0.1), transparent 12%); }

/* The set menu is the richest band on the page, so it gets the wine and the
   brass together rather than one wash. */
.formule {
  background:
    var(--gilt-spill),
    var(--gilt-sweep),
    linear-gradient(102deg, rgba(10, 16, 22, 0.95) 0%, rgba(84, 30, 22, 0.78) 52%, rgba(10, 16, 22, 0.96) 100%),
    var(--slats), var(--ink-2);
}

/* ---------- Paper ---------- */
/* The carte and the hours are printed things, so they are printed: warm
   champagne, wine-black ink, gilt rules. It is the one real contrast on the
   page and it is what stops the site reading as a dark template. */
/* An actual sheet rather than a flat fill: laid paper with the grain and the
   horizontal line in it, and the bokeh of the backbar blown almost to white
   behind it so there is light in the stock. Fixed, so the two printed bands
   read as one sheet running behind the whole page rather than as two panels
   that each happen to be beige. */
section.paper {
  background-color: var(--paper);
  background-image:
    radial-gradient(100% 68% at 50% -8%, rgba(255, 255, 255, 0.5), 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);
}
/* A brass hairline is invisible on champagne; the paper bands are closed with
   their own ink instead. */
.paper::before {
  background: linear-gradient(90deg, transparent, rgba(27, 39, 51, 0.28) 18%, rgba(27, 39, 51, 0.28) 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(27, 39, 51, 0.24); }
.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(27, 39, 51, 0.22); }
.paper .hours-list .time { color: var(--para-on-paper); }
.paper .hours-list .closed { color: #9e3527; }
.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); }
/* The map is a daylight map again on a daylight band */
.paper #map { border-color: var(--rule-on-paper); }
.paper #map .leaflet-tile-pane { filter: sepia(0.24) saturate(0.62) brightness(1.03) contrast(0.95); }
.paper #map .leaflet-control-attribution { background: rgba(242, 236, 220, 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 paper the button inverts: the rule and the fill are the ink of the band */
.paper .btn { background: rgba(27, 39, 51, 0.5); color: var(--ink-on-paper); }
.paper .btn::after { background: var(--paper); }
.paper .btn:hover { background: var(--ink-on-paper); color: var(--paper); }
.paper .btn:hover::after { background: var(--ink-on-paper); }
.paper .btn.solid { background: var(--ink-on-paper); color: var(--paper); }
.paper .btn.solid::after { background: var(--ink-on-paper); }
.paper .btn.solid:hover { background: var(--gold-on-paper); color: var(--gold-on-paper); }
.paper .btn.solid:hover::after { background: var(--paper); }
.paper ::selection { background: var(--ink-on-paper); color: var(--paper); }

/* ---------- Nav ---------- */
.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(10, 16, 22, 0.92);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  padding: 10px 0;
  box-shadow: 0 1px 0 var(--line-soft);
}
/* backdrop-filter makes .nav the containing block for fixed children, which
   breaks the full-screen mobile panel; drop it while that panel is open */
.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 is wide, not square, so the height is fixed and it never shrinks:
   a crowded bar would otherwise collapse the column and the logo disappears.
   Under about 70px the hairline "RESTAURANT & LOUNGE" line stops resolving.
   The shadow is what holds it over the hero photograph, since there is no bar
   behind it until the page scrolls. */
.nav-logo img {
  height: 74px; width: auto; flex: none;
  filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.75));
  transition: height 0.4s var(--ease);
}
.nav.scrolled .nav-logo img { height: 56px; 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: 500;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  text-indent: 0.15em;
  color: var(--pearl);
  opacity: 0.92;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55);
  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 sea in miniature: the underline is a small swell rather than a flat
   rule, and it is the only place on the site the water is drawn. */
.nav-links a::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 2px; height: 6px;
  background: no-repeat center / 100% 100%
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 7'%3E%3Cpath d='M0 4q12.5-6 25 0t25 0t25 0t25 0' fill='none' stroke='%23d9a441' stroke-width='1.1'/%3E%3C/svg%3E");
  transform: scaleX(0); transform-origin: right;
  transition: transform 0.5s var(--ease);
}
.nav-links a:hover { opacity: 1; color: var(--brass); }
.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: 1px solid var(--line); padding: 10px 22px !important; border-radius: 1px; }
.nav-cta:hover { background: var(--pearl); border-color: var(--pearl); color: var(--on-pearl) !important; }
.nav-cta::after { display: none; }

/* Two-state switch, sharp like the buttons, with the knob sliding under the
   active language rather than two separate lit blocks. */
.lang-switch {
  position: relative; display: flex; padding: 3px;
  border: 1px solid var(--line-soft); border-radius: 1px;
}
.lang-switch::before {
  content: ''; position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px);
  background: var(--pearl);
  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(--para);
  font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: 0.14em; padding: 6px 14px;
  transition: color 0.35s;
}
.lang-switch button.active { color: var(--on-pearl); }

.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: 1px; background: var(--pearl); transition: 0.4s var(--ease); }
.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(--ink-2); }
.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%); } }
/* Three layers, each doing a different job: a band of shade across the middle
   so the title and the two small lines under it hold, a vignette to keep the
   eye centred, and a foot dark enough for the section below to arrive out of.
   Held deliberately light. The photograph behind is the warm end of the bar and
   it is the whole point of the hero; the buttons carry their own contrast now,
   and the title its own shadow, so the veil does not have to do their work. */
.hero-bg::after {
  content: '';
  position: absolute; inset: 0;
  background:
    /* A bed under the words only. The hero photograph has five lit cocktails
       stood across the middle of it, exactly where the title, the tagline and
       the buttons fall; a full-width band dark enough to fix that would put the
       whole picture back in the dark. This pools the shade where the type is
       and lets the outer glasses keep their colour. */
    radial-gradient(48% 42% at 50% 47%, rgba(10, 16, 22, 0.74), rgba(10, 16, 22, 0.34) 62%, transparent 80%),
    linear-gradient(180deg, transparent 20%, rgba(10, 16, 22, 0.3) 42%, rgba(10, 16, 22, 0.3) 64%, transparent 84%),
    radial-gradient(125% 95% at 50% 44%, transparent 0%, rgba(10, 16, 22, 0.3) 74%, rgba(10, 16, 22, 0.76) 100%),
    linear-gradient(180deg, rgba(10, 16, 22, 0.5) 0%, rgba(10, 16, 22, 0.08) 42%, rgba(10, 16, 22, 0.78) 100%);
}
.hero-content { position: relative; z-index: 2; padding: 0 24px; }
/* The house name, set as the badge sets it: slab letterpress caps that start
   scattered wide and lock into place as they arrive, the way stencilled
   lettering is struck. One orchestrated moment, then nothing. */
.hero-script {
  font-family: var(--display);
  font-size: clamp(30px, 4.6vw, 64px);
  color: var(--pearl);
  font-weight: 400;
  line-height: 1.22;
  letter-spacing: 0.05em;
  max-width: 22ch;
  margin: 0 auto;
  text-shadow: 0 6px 50px rgba(0, 0, 0, 0.55);
}
.hero-tag {
  margin-top: 26px;
  font-family: var(--sans);
  color: var(--pearl);
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.7);
  font-size: clamp(11.5px, 1.25vw, 14px);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.52em;
  text-indent: 0.52em;
}
.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.22em; }
  to { opacity: 1; transform: none; letter-spacing: 0.05em; }
}
@keyframes navItemIn { to { opacity: 1; transform: none; } }

/* The hours, and the year the room opened. The two facts people look for. */
.hero-hours {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  margin-top: 38px;
  font-family: var(--sans); font-size: 12px; font-weight: 500;
  letter-spacing: 0.36em; text-indent: 0.36em;
  color: var(--brass);
}
.hero-hours { text-shadow: 0 2px 20px rgba(0, 0, 0, 0.8); }
.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 ---------- */
/* Every photograph on the site is framed the way the pictures on the wall of
   the room are: a hairline keyline set in from the edge. It steps inward on
   hover while the photograph itself steps up. */
.img-frame { position: relative; overflow: hidden; border-radius: 1px; }
.img-frame::after {
  content: ''; position: absolute; inset: 12px; pointer-events: none;
  border: 1px solid rgba(240, 232, 211, 0.28);
  transition: inset 0.7s var(--ease), border-color 0.7s var(--ease);
}
.img-frame img { transition: transform 1.4s var(--ease); }
.img-frame:hover img { transform: scale(1.05); }
.img-frame:hover::after { inset: 18px; border-color: var(--brass); }

/* ---------- 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%;
  border: 10px solid var(--ink);
  box-shadow: 0 34px 70px rgba(0, 0, 0, 0.55);
}
.about-images .img-accent::after { inset: 8px; }
.about-text p { color: var(--para); margin: 26px 0; font-size: 16.5px; }

/* ---------- Menu ---------- */
.menu-section { background: var(--ink-2); }
.menu-tabs { display: flex; justify-content: center; gap: 0; margin-bottom: 46px; }
.menu-tabs button {
  background: transparent; border: 1px solid var(--line-soft); color: var(--para);
  border-radius: 0;
  padding: 13px 40px;
  font-family: var(--sans); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.2em; text-indent: 0.2em; font-size: 12px;
  transition: 0.4s var(--ease);
}
.menu-tabs button + button { border-left: 0; }
.menu-tabs button.active { border-color: var(--pearl); color: var(--on-pearl); background: var(--pearl); }
.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); } }
.menu-cat { break-inside: avoid; }
/* The carte's own headings, set the way the house sets them on paper: the
   name centred over its column in letterspaced caps, the note under it in the
   Didone italic, and one rule closing the block. The rule goes under the whole
   head, not off the side of the words: a line running out of the last letter
   pulls the eye away from the column it is supposed to open. */
.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: 13.5px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.3em; text-indent: 0.3em;
  color: var(--pearl);
  line-height: 1.5;
  margin: 0;
}
/* The note under the category name is chalked, not printed: the one place
   besides the programme where the script speaks. */
.menu-cat-sub {
  font-family: var(--script);
  color: var(--brass);
  font-size: 18px;
  line-height: 1.4;
  margin: 7px 0 0;
}
/* Spacing between stacked categories is the grid's row gap, not a sibling
   margin: `.menu-cat + .menu-cat` also matches the category that lands in
   column two of row one, which pushed every column but the first down. */
/* The dish is the sans and the price is the slab: the ticket scheme. Priced
   tickets at a counter set the number in the wood type and the words in the
   plain hand, and that is exactly the hierarchy a carte wants. */
.menu-item { display: flex; align-items: baseline; gap: 10px; padding: 7px 0; }
.menu-item .mi-name { font-family: var(--sans); font-size: 15.5px; font-weight: 500; color: var(--pearl); white-space: nowrap; }
.menu-item .mi-dots { flex: 1; border-bottom: 1px dotted rgba(169, 180, 189, 0.32); transform: translateY(-5px); }
.menu-item .mi-price { font-family: var(--display); color: var(--brass); font-size: 13.5px; white-space: nowrap; }
.menu-item-desc { color: var(--para); opacity: 0.78; 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: 500; font-style: normal;
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--para); opacity: 0.75;
}

/* ---------- Formule du jour ---------- */
/* The set menu is what most tables order, so it gets a band rather than a line
   inside the carte. Built from the menu category whose name contains
   "formule": rename it in the panel and this follows. */
.formule {
  background:
    linear-gradient(102deg, rgba(10, 16, 22, 0.96) 0%, rgba(26, 37, 48, 0.9) 52%, rgba(10, 16, 22, 0.97) 100%),
    var(--slats), var(--ink-2);
  border-block: 1px solid var(--line-soft);
}
.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(28px, 3.2vw, 44px); }
.formule-copy > p { color: var(--para); margin-bottom: 26px; max-width: 44ch; }
.formule-time {
  font-family: var(--script); font-size: 26px;
  color: var(--brass); margin: 20px 0 !important;
}
.formule-copy .btn { margin-top: 8px; }
/* A card pinned to the wall: the keyline frame again, this time around type */
.formule-list {
  position: relative;
  background: rgba(158, 53, 39, 0.09);
  border: 1px solid var(--line);
  padding: clamp(30px, 3.4vw, 46px) clamp(26px, 3vw, 42px);
}
.formule-list::after {
  content: ''; position: absolute; inset: 9px; pointer-events: none;
  border: 1px solid rgba(240, 232, 211, 0.1);
}
.fm-row { display: flex; align-items: baseline; gap: 12px; padding: 10px 0; }
.fm-name { font-family: var(--sans); font-weight: 500; font-size: 16px; color: var(--pearl); }
.fm-dots { flex: 1; border-bottom: 1px dotted rgba(169, 180, 189, 0.3); transform: translateY(-4px); }
.fm-price { font-family: var(--display); font-size: 14px; color: var(--brass); white-space: nowrap; }
@media (max-width: 900px) { .formule-inner { grid-template-columns: 1fr; } }

/* ---------- Le programme ---------- */
/* Seven nights, read straight off the opening hours the owner keeps in the
   panel. Nothing to upload, and it can never fall out of date. */
.programme-section { background: var(--ink-2); }
.programme-grid {
  display: grid; grid-template-columns: repeat(7, 1fr);
  border: 1px solid var(--line-soft); border-right: 0;
}
.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: rgba(217, 164, 65, 0.06); }
.prog-day.today { background: rgba(158, 53, 39, 0.16); }
.prog-day.today::before {
  content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--brass);
}
.prog-name {
  display: block; font-family: var(--sans); font-weight: 500; font-size: 11.5px;
  text-transform: uppercase; letter-spacing: 0.18em; text-indent: 0.18em;
  color: var(--pearl);
}
.prog-hours { display: block; font-size: 12.5px; color: var(--para); opacity: 0.65; margin-top: 8px; letter-spacing: 0.06em; }
.prog-note {
  display: block; font-family: var(--script); font-size: 27px; line-height: 1.15;
  color: var(--brass); margin-top: 16px; min-height: 34px;
}
.prog-note:empty::before { content: '·'; opacity: 0.3; }
.prog-day.shut .prog-hours { color: var(--err); opacity: 0.8; }
@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: 23px; } }

/* ---------- Spaces ---------- */
.spaces-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.space-card { position: relative; overflow: hidden; aspect-ratio: 3 / 4.2; border-radius: 1px; }
.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 46%, rgba(10, 16, 22, 0.92));
}
/* The keyline, matching the framed photographs elsewhere */
.space-card::after {
  content: ''; position: absolute; inset: 12px; z-index: 3; pointer-events: none;
  border: 1px solid rgba(240, 232, 211, 0.22);
  transition: inset 0.7s var(--ease), border-color 0.7s var(--ease);
}
.space-card:hover::after { inset: 18px; border-color: var(--brass); }
.space-card figcaption {
  position: absolute; left: 0; right: 0; bottom: 30px; z-index: 4;
  text-align: center;
  font-family: var(--sans); font-weight: 500;
  font-size: 13px; letter-spacing: 0.22em; text-indent: 0.22em; text-transform: uppercase; color: var(--pearl);
  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(--sans); font-weight: 300;
  font-size: 12px; letter-spacing: 0.12em; text-indent: 0.12em; text-transform: uppercase;
  color: var(--brass); margin-top: 7px; line-height: 1.4;
}

/* ---------- Gallery ---------- */
.gallery-section { background: var(--ink-2); }
/* Six pictures on a three by three grid: the lead takes four cells, the other
   five take one each, and the nine tile exactly. Every cell is the same 16:10,
   so the set reads as one edit rather than a pile of stock. The row height is
   tied to the column width so that aspect holds at any screen size. A marquee
   says "we have photographs"; a grid says which one matters. */
.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; }
.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;
  filter: saturate(0.94);
  transition: transform 1.2s var(--ease), filter 0.6s var(--ease);
}
.gal-grid figure::after {
  content: ''; position: absolute; inset: 10px; pointer-events: none;
  border: 1px solid rgba(240, 232, 211, 0.16);
  transition: inset 0.6s var(--ease), border-color 0.6s var(--ease);
}
.gal-grid figure:hover img { transform: scale(1.05); filter: saturate(1.06) brightness(1.06); }
.gal-grid figure:hover::after { inset: 16px; border-color: var(--brass); }
@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; }
  .gal-grid figure::after { inset: 7px; }
  .gal-grid figure:hover::after { inset: 11px; }
}

.lightbox {
  position: fixed; inset: 0; z-index: 90; background: rgba(10, 16, 22, 0.97);
  display: grid; place-items: center; opacity: 0; pointer-events: none; transition: opacity 0.4s;
}
.lightbox.open { opacity: 1; pointer-events: auto; }
.lightbox img { max-width: 90vw; max-height: 86vh; object-fit: contain; box-shadow: 0 40px 100px rgba(0, 0, 0, 0.6); }
.lightbox button {
  position: absolute; background: none; border: 1px solid var(--line-soft); color: var(--pearl);
  width: 48px; height: 48px; font-size: 18px; transition: 0.35s; display: grid; place-items: center;
}
.lightbox button:hover { border-color: var(--brass); color: var(--brass); }
.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: 500; text-transform: uppercase; letter-spacing: 0.16em; text-indent: 0.16em; font-size: 11.5px; color: var(--pearl); }
.hours-list .day-note { font-family: var(--script); font-size: 22px; line-height: 1.1; color: var(--brass); }
.hours-list .dots { flex: 1; border-bottom: 1px dotted rgba(169, 180, 189, 0.26); transform: translateY(-4px); }
.hours-list .time { color: var(--pearl-dim); letter-spacing: 0.06em; }
.hours-list .closed { color: var(--err); font-family: var(--script); font-size: 17px; }
.contact-lines { margin-top: 30px; display: grid; gap: 12px; color: var(--para); font-size: 15px; }
.contact-lines a:hover { color: var(--brass); }
.contact-lines strong { color: var(--brass); font-weight: 400; }
#map { min-height: 440px; height: 100%; border: 1px solid var(--line); border-radius: 1px; z-index: 1; }
#map .leaflet-tile-pane { filter: invert(1) hue-rotate(185deg) brightness(0.86) contrast(0.86) saturate(0.5); }
#map .leaflet-control-attribution { background: rgba(10, 16, 22, 0.7); color: var(--para); }
#map .leaflet-control-attribution a { color: var(--brass); }
#map .leaflet-bar a { background: var(--panel); color: var(--pearl); border-bottom-color: var(--line); }
#map .leaflet-bar a:hover { background: var(--panel-2); color: var(--brass); }
.map-pin { position: relative; width: 22px; height: 22px; }
.map-pin::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: var(--wine); border: 3px solid var(--pearl);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}
.map-pin::after {
  content: ''; position: absolute; inset: -12px; border-radius: 50%;
  border: 2px solid var(--brass);
  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(--pearl); color: var(--on-pearl); border-radius: 1px; }
.leaflet-popup-content a { color: var(--wine); font-weight: 500; }

/* ---------- Reservation ---------- */
/* The photograph was under a 90% scrim, which is a black rectangle with a
   picture somewhere behind it. It reads at 62 and the band stops feeling like
   a wall. */
.reserve-section {
  background:
    linear-gradient(rgba(10, 16, 22, .62), rgba(10, 16, 22, .74)),
    url('../images/space-restaurant.jpg') center/cover fixed;
}
/* Printed, like the carte and the hours. A dozen fields on a near-black card
   is the least comfortable thing on the site to fill in, and the one place a
   guest cannot afford to lose their place. */
.reserve-panel {
  position: relative;
  max-width: 780px; margin: 0 auto;
  background-color: var(--paper);
  background-image:
    radial-gradient(100% 68% at 50% -8%, rgba(255, 255, 255, .5), transparent 68%),
    url('../images/paper.jpg');
  background-size: auto, cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--para-on-paper);
  border: 1px solid rgba(27, 39, 51, .18);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55);
  padding: clamp(36px, 5vw, 68px);
}
.reserve-panel::after {
  content: ''; position: absolute; inset: 10px; pointer-events: none;
  border: 1px solid rgba(27, 39, 51, .1);
}
.reserve-panel .kicker { color: var(--gold-on-paper); }
.reserve-panel .kicker::before, .reserve-panel .kicker::after { background: var(--rule-on-paper); }
.reserve-panel .section-title { color: var(--ink-on-paper); }
.reserve-panel .section-sub, .reserve-panel .form-note { color: var(--para-on-paper); }
.reserve-panel .prefill-note { color: var(--gold-on-paper); }
.reserve-panel .form-field label { color: var(--gold-on-paper); }
.reserve-panel .field-note { color: var(--para-on-paper); opacity: .85; }
.reserve-panel .form-field input,
.reserve-panel .form-field select,
.reserve-panel .timepick-btn {
  background-color: rgba(255, 255, 255, .72);
  border-color: rgba(27, 39, 51, .22);
  color: var(--ink-on-paper);
}
.reserve-panel .form-field input::placeholder { color: rgba(76, 90, 102, .55); }
.reserve-panel .form-field input:focus,
.reserve-panel .form-field select:focus,
.reserve-panel .timepick-btn:hover,
.reserve-panel .timepick-btn.open { border-color: var(--gold-on-paper); }
.reserve-panel .form-field input[type='date'] { color-scheme: light; }
.reserve-panel .form-field select {
  background-image: linear-gradient(45deg, transparent 50%, var(--gold-on-paper) 50%),
                    linear-gradient(135deg, var(--gold-on-paper) 50%, transparent 50%);
  background-position: calc(100% - 20px) 55%, calc(100% - 15px) 55%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}
.reserve-panel .form-field select option { background: var(--paper); color: var(--ink-on-paper); }
.reserve-panel .timepick-btn .tp-caret { border-top-color: var(--gold-on-paper); }
.reserve-panel .timepick-btn svg { fill: var(--gold-on-paper); }
.reserve-panel .timepick-btn.chosen { color: var(--ink-on-paper); }
.reserve-panel .timepick-panel {
  background: var(--paper); border-color: rgba(27, 39, 51, .2);
  box-shadow: 0 20px 46px rgba(0, 0, 0, .3);
}
.reserve-panel .timepick-slot { background: rgba(27, 39, 51, .05); color: var(--para-on-paper); }
.reserve-panel .timepick-slot:hover { background: rgba(122, 90, 20, .12); color: var(--ink-on-paper); border-color: var(--gold-on-paper); }
.reserve-panel .timepick-slot.on { background: var(--ink-on-paper); color: var(--paper); border-color: var(--ink-on-paper); }
.reserve-panel .btn { background: rgba(27, 39, 51, .5); color: var(--ink-on-paper); }
.reserve-panel .btn::after { background: var(--paper); }
.reserve-panel .btn:hover { background: var(--ink-on-paper); color: var(--paper); }
.reserve-panel .btn:hover::after { background: var(--ink-on-paper); }
.reserve-panel .btn.solid { background: var(--ink-on-paper); color: var(--paper); }
.reserve-panel .btn.solid::after { background: var(--ink-on-paper); }
.reserve-panel .btn.solid:hover { background: var(--gold-on-paper); color: var(--gold-on-paper); }
.reserve-panel .btn.solid:hover::after { background: var(--paper); }
.reserve-panel .form-msg.err { color: var(--wine); }
.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: 500; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.22em; text-indent: 0.22em; color: var(--brass); }
.form-field input, .form-field select {
  background: rgba(10, 16, 22, 0.6);
  border: 1px solid var(--line-soft);
  color: var(--pearl);
  padding: 15px 16px;
  font-family: var(--sans); font-size: 15px; font-weight: 300; letter-spacing: 0.02em;
  transition: border-color 0.35s;
  width: 100%; border-radius: 1px; appearance: none;
}
.form-field input:focus, .form-field select:focus { outline: none; border-color: var(--brass); }
.form-field input::placeholder { color: rgba(169, 180, 189, 0.42); }
.form-field select {
  background-image: linear-gradient(45deg, transparent 50%, var(--brass) 50%), linear-gradient(135deg, var(--brass) 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(--panel); color: var(--pearl); }
.form-field input[type='date'], .form-field input[type='time'] { color-scheme: dark; }
.phone-row { display: grid; grid-template-columns: 136px 1fr; gap: 10px; }
.form-note { color: var(--para); opacity: 0.78; 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(169, 180, 189, 0.6); letter-spacing: 0.02em; }
.prefill-note { color: var(--brass); font-size: 13px; margin-top: 12px; }

/* ---------- Footer ---------- */
footer { background: var(--ink-2); border-top: 1px solid var(--line-soft); padding: 76px 0 34px; }
.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: 600;
  text-transform: uppercase; letter-spacing: 0.22em; text-indent: 0.22em;
  margin-bottom: 20px; color: var(--brass);
}
.footer-grid p, .footer-grid a, .footer-grid li { color: var(--para); font-size: 15.5px; line-height: 1.7; list-style: none; }
.footer-grid a:hover { color: var(--brass); }
.footer-grid ul { display: grid; gap: 12px; }
.footer-logo { height: 62px; width: auto; margin-bottom: 20px; }
.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, so the only thing hover does
   is lift them. */
.socials a {
  width: 46px; height: 46px; display: block; border-radius: 10px;
  /* No overflow clip: each logo already carries its own corner radius, and
     clipping to ours shaves whichever one is rounder than 10px. The radius is
     kept so the hover shadow follows the shape. */
  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, .4); }
.footer-bottom {
  border-top: 1px solid var(--line-soft); padding-top: 28px;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  color: var(--para); opacity: 0.9; font-size: 13.5px; letter-spacing: 0.05em;
}
.footer-bottom a:hover { color: var(--brass); }

/* ---------- Subpages ---------- */
.page-hero { height: 50vh; min-height: 380px; display: grid; place-items: center; text-align: center; position: relative; overflow: hidden; padding: 0; }
.page-hero .hero-bg img { animation: none; }
.page-hero .hero-bg::after {
  background: linear-gradient(180deg, rgba(10, 16, 22, 0.76) 0%, rgba(10, 16, 22, 0.54) 45%, rgba(10, 16, 22, 0.9) 100%);
}
.hero-video { display: block; }
.page-hero .hero-video { filter: blur(3px) saturate(0.95); 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(30px, 4.4vw, 56px); position: relative; z-index: 2; letter-spacing: 0.04em; }
.page-hero .kicker { position: relative; z-index: 2; }
.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(--brass); font-weight: 500; }
.legal p, .legal li { color: var(--para); font-size: 15px; margin-bottom: 12px; }
.legal ul { padding-left: 20px; }

/* ---------- Toast ---------- */
/* The banner that answers a booking. It comes down from the top of the window
   rather than sitting in the page, because the confirmation matters more than
   the form it came from, and the form is usually scrolled past by then. It
   takes itself away after five seconds. */
.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: 2px;
  background: var(--paper); color: var(--ink-on-paper);
  border: 1px solid rgba(27, 39, 51, .18);
  box-shadow: 0 18px 50px rgba(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; }
/* The mark on the left says which kind of news this is before the words do */
.toast::before {
  content: ''; flex: none; width: 4px; align-self: stretch; border-radius: 2px;
  background: var(--ok);
}
.toast.err::before { background: var(--wine); }
.toast .toast-close {
  margin-left: auto; flex: none; background: none; border: 0; cursor: pointer;
  font-size: 18px; line-height: 1; color: var(--para-on-paper); padding: 0 2px;
}
.toast .toast-close:hover { color: var(--ink-on-paper); }
@media (max-width: 560px) { .toast { font-size: 13.5px; padding: 14px 16px; } }

/* ---------- Account ---------- */
.nav-auth {
  border: 1px solid var(--line); border-radius: 1px;
  padding: 10px 20px !important; letter-spacing: 0.2em; text-indent: 0.2em;
  transition: background .35s, color .35s, border-color .35s;
}
.nav-auth::after { display: none; }
.nav-auth:hover { background: var(--pearl); border-color: var(--pearl); color: var(--on-pearl) !important; }
.nav-auth.signed-in { border-color: var(--brass); color: var(--brass) !important; }
.nav-auth.signed-in:hover { background: var(--brass); border-color: var(--brass); color: var(--on-pearl) !important; }

.page-account { background: var(--ink-2); }
.page-account::before {
  content: ''; position: fixed; inset: 0; z-index: -2;
  background: url('/images/account-bg.jpg') center/cover no-repeat;
}
.page-account::after {
  content: ''; position: fixed; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(10, 16, 22, .70), rgba(10, 16, 22, .84) 55%, rgba(10, 16, 22, .95));
}
.page-account .nav {
  background: rgba(10, 16, 22, 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-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(--line-soft); background: rgba(10, 16, 22, .6); }

.auth-wrap { display: flex; justify-content: center; width: 100%; }
.auth-card {
  position: relative;
  width: min(580px, 100%); background: rgba(20, 30, 40, 0.9); border: 1px solid var(--line);
  border-radius: 1px; padding: 34px 36px; text-align: center;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  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(240, 232, 211, 0.08); }
.auth-card > * { position: relative; z-index: 1; }
.auth-logo { width: 130px; 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: 500; font-size: 10px; text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--brass); margin-top: 8px;
}
.auth-form input {
  width: 100%; background: rgba(10, 16, 22, 0.7); border: 1px solid var(--line-soft);
  border-radius: 1px; padding: 12px 13px; color: var(--pearl);
  font-family: var(--sans); font-size: 14.5px;
}
.auth-form input:focus { outline: none; border-color: var(--brass); }
.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.7; line-height: 16px; margin-top: 4px; }
.gender-row { display: flex; gap: 8px; }
.gender-row button {
  flex: 1; background: rgba(10, 16, 22, 0.7); border: 1px solid var(--line-soft); border-radius: 1px;
  color: var(--para); padding: 10px 6px; font-size: 13px; font-family: var(--sans); transition: .3s;
}
.gender-row button:hover { border-color: var(--brass); }
.gender-row button.active { border-color: var(--brass); background: var(--brass-soft); color: var(--brass); }
.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(--brass); text-decoration: underline; }
.pending-title { font-family: var(--display); font-size: 24px; font-weight: 400; margin-bottom: 8px; color: var(--pearl); }

.auth-form select {
  width: 100%; background: rgba(10, 16, 22, 0.7); border: 1px solid var(--line-soft);
  border-radius: 1px; padding: 12px 13px; color: var(--pearl);
  font-family: var(--sans); font-size: 14.5px; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--brass) 50%),
                    linear-gradient(135deg, var(--brass) 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(--brass); }
.auth-form select option { background: var(--panel); color: var(--pearl); }

.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(--brass); opacity: 1; }
.pw-eye.on .eye-open { display: none; }
.pw-eye.on .eye-shut { display: block; }
.pw-eye:hover { color: var(--pearl); 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(--brass); 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(--brass); text-decoration: underline; white-space: nowrap; }
.forgot-link:hover { color: var(--pearl); }
.birthday-note {
  font-size: 12px; color: var(--brass); margin-top: 10px; text-align: center;
  background: var(--brass-soft); border: 1px solid var(--line); border-radius: 1px; 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: rgba(20, 30, 40, .86); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--line); border-radius: 1px; padding: 28px;
}
.member-card h3 { font-family: var(--display); font-size: 21px; font-weight: 400; 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(--wine), #541e16 62%, var(--panel)); border-color: rgba(217, 164, 65, 0.4); }
.fidelity-card .kicker { display: block; margin-bottom: 8px; }
.fidelity-card b { font-family: var(--display); font-size: 56px; font-weight: 400; color: var(--pearl); line-height: 1; }
.fidelity-card p { color: var(--para); font-size: 13px; margin-top: 12px; line-height: 20px; }
.fidelity-card.off b { color: var(--para); opacity: 0.6; }

.member-heading { font-family: var(--display); font-size: 24px; font-weight: 400; margin-bottom: 18px; color: var(--pearl); }
.res-list { display: grid; gap: 12px; }
.res-card {
  display: flex; align-items: center; gap: 18px; background: rgba(20, 30, 40, .86);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--line-soft); border-radius: 1px; padding: 17px 22px;
}
.res-when { display: grid; min-width: 92px; }
.res-when b { font-family: var(--display); font-size: 20px; font-weight: 400; color: var(--brass); }
.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: 400; color: var(--pearl); }
.res-meta span { font-size: 12px; color: var(--para); opacity: 0.7; }
.res-badge { font-family: var(--sans); font-weight: 500; font-size: 10.5px; letter-spacing: 0.14em; text-indent: 0.14em; text-transform: uppercase; padding: 6px 13px; border-radius: 1px; border: 1px solid; }
.res-badge.pending { color: var(--brass); border-color: rgba(217, 164, 65, 0.5); }
.res-badge.confirmed { color: var(--ok); border-color: rgba(143, 174, 139, 0.5); }
.res-badge.cancelled { color: var(--err); border-color: rgba(223, 163, 156, 0.5); }

.hidden { display: none !important; }

/* ---------- Contact band ---------- */
.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;
  background: linear-gradient(180deg, rgba(10, 16, 22, .93), rgba(26, 37, 48, .86) 45%, rgba(10, 16, 22, .95));
}
.contact-band > .container { position: relative; }
.contact-inner { text-align: center; max-width: 1080px; margin: 0 auto; }
.contact-inner .section-title { font-size: clamp(30px, 4vw, 48px); }
.contact-lead { color: var(--para); 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(20, 30, 40, 0.78); border: 1px solid var(--line); border-radius: 1px;
  padding: 19px 21px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: border-color .35s var(--ease), transform .35s var(--ease), background .35s var(--ease);
}
a.contact-card:hover { border-color: var(--brass); transform: translateY(-3px); background: rgba(26, 37, 48, 0.92); }
.cc-icon {
  width: 42px; height: 42px; flex: none; border-radius: 1px; display: grid; place-items: center;
  background: var(--brass-soft); border: 1px solid var(--line);
}
.cc-icon svg { width: 16px; height: 16px; fill: var(--brass); }
.cc-body { display: grid; gap: 3px; min-width: 0; }
.cc-body small { font-family: var(--sans); font-weight: 500; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brass); }
.cc-body b { font-weight: 300; font-size: 14px; line-height: 1.4; color: var(--pearl); overflow-wrap: anywhere; }

.contact-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 32px; }
.contact-band .socials { justify-content: center; }

/* ---------- Deals ---------- */
.deals-main { align-items: flex-start; padding-top: 120px; }
.deals-main .section-head { margin-bottom: 32px; }
.deals-empty {
  background: rgba(20, 30, 40, .86); border: 1px solid var(--line); border-radius: 1px;
  padding: 44px 32px; text-align: center; color: var(--para); max-width: 580px; margin: 0 auto;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.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: var(--brass); font-weight: 500; 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: rgba(20, 30, 40, .9); border: 1px solid rgba(217, 164, 65, .32); border-radius: 1px;
  padding: 15px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: transform .35s var(--ease), border-color .35s var(--ease);
}
.deal-card:hover { transform: translateY(-3px); border-color: var(--brass); }
.deal-card img { width: 74px; height: 74px; border-radius: 1px; object-fit: cover; flex: none; }
.deal-body { min-width: 0; flex: 1; }
.deal-body h3 { font-family: var(--display); font-size: 18px; font-weight: 400; 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(--brass); font-size: 18px; font-weight: 400; }
.deal-badge {
  position: absolute; top: 12px; right: 12px; background: var(--brass-soft);
  color: var(--brass); border-radius: 1px; padding: 4px 11px;
  font-family: var(--sans); font-weight: 500; font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
}
.mi-was { color: var(--para); opacity: 0.5; margin-right: 10px; font-size: 0.92em; }
.mi-deal { color: var(--ok); font-weight: 400; font-style: normal; }
.nav-deals { color: var(--brass) !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(--brass); margin-bottom: 12px; font-weight: 500;
}
.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: 1px; background: var(--brass); }
.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: rgba(10, 16, 22, 0.6); border: 1px solid var(--line-soft); color: var(--para);
  padding: 15px 16px; font-family: var(--sans); font-size: 15px; font-weight: 300;
  letter-spacing: 0.02em; text-align: left; border-radius: 1px;
  transition: border-color 0.35s, color 0.35s;
}
.timepick-btn:hover, .timepick-btn.open { border-color: var(--brass); }
.timepick-btn.chosen { color: var(--pearl); }
.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(--brass);
  transition: transform 0.3s var(--ease);
}
.timepick-btn.open .tp-caret { transform: rotate(180deg); }
.timepick-btn svg { width: 16px; height: 16px; fill: var(--brass); 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(--panel); border: 1px solid var(--line);
  box-shadow: 0 20px 46px rgba(0, 0, 0, 0.55);
}
.timepick-panel[hidden] { display: none; }
.timepick-slot {
  background: rgba(240, 232, 211, 0.035); border: 1px solid transparent; color: var(--para);
  padding: 10px 4px; font-family: var(--sans); font-size: 13.5px; letter-spacing: 0.04em;
  border-radius: 1px;
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}
.timepick-slot:hover { background: var(--brass-soft); color: var(--pearl); border-color: var(--brass); }
.timepick-slot.on { background: var(--pearl); color: var(--on-pearl); border-color: var(--pearl); }
.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(--ink-2); transition: opacity .3s ease;
}
.page-boot.gone { opacity: 0; pointer-events: none; }
.boot-mark { position: relative; width: 120px; height: 120px; display: grid; place-items: center; }
.boot-mark img { width: 76px; height: auto; }
.boot-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid rgba(240, 232, 211, 0.14); border-top-color: var(--brass);
  animation: bootSpin 1s linear infinite;
}
@keyframes bootSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .boot-ring { animation-duration: 2.6s; } }

/* ---------- Marketing ---------- */
.promo-banner {
  position: fixed; inset: 0 0 auto 0; z-index: 70;
  background: var(--wine);
  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
  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(--pearl); font-weight: 400;
  font-family: var(--sans); font-weight: 500; font-size: 13.5px; letter-spacing: 0.14em; text-decoration: none;
  text-transform: uppercase;
}
a.promo-banner-text:hover { color: #fff; }
@keyframes promo-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .promo-track { animation: none; } }
@media (max-width: 860px) { .promo-banner { font-size: 13px; padding: 8px 14px; } }

.promo-notice {
  display: block; margin: 0 auto 28px; max-width: 660px;
  background: var(--wine); color: var(--pearl); font-weight: 400;
  border-radius: 1px; padding: 12px 28px;
  font-family: var(--sans); font-weight: 500; 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: 50px; }
  .nav.scrolled .nav-logo img { height: 42px; }
  .nav-links {
    position: fixed; inset: 0; height: 100svh;
    background: var(--ink-2);
    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; }
  .nav-links .nav-cta { border: 1px solid var(--brass); padding: 14px 30px !important; }
  .nav-links li { width: 100%; text-align: center; opacity: 0; transform: translateY(14px); }
  .nav-links .lang-switch { display: inline-flex; }
  .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; }
  /* Two price columns have to survive a narrow screen. Wrapping put the bottle
     price on its own line under long names, so here the row never wraps: the
     name takes the slack and the two figures hold their columns. */
  .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
   monogram inside it does not, which is the whole trick.
   The disc behind it is not decoration: this page runs dark bands against
   paper ones, and the badge crosses both. Without it the brass wording
   disappears exactly over the reservation section it points at. */
.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(10, 16, 22, 0.72); border: 1px solid var(--line-soft);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.reserve-badge svg { position: absolute; inset: 0; animation: spin 14s linear infinite; }
.reserve-badge svg text {
  fill: var(--brass); font-family: var(--sans); font-weight: 500;
  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: 54px; height: auto; }
.reserve-badge:hover .badge-center { transform: scale(1.09); }
@keyframes spin { to { transform: rotate(360deg); } }

/* A turning object in the corner is the first thing to go when someone has
   asked for less movement. The badge stays; only the rotation stops. */
@media (prefers-reduced-motion: reduce) {
  .reserve-badge svg { animation: none; }
}

/* On a phone it would sit on the content rather than float over it, and the
   bar already carries the booking button. This has to live below the rule that
   makes the badge a grid, not up with the other 1024 rules, or it loses to it. */
@media (max-width: 1024px) {
  .reserve-badge { display: none; }
}

/* ---------- Booking switched off ---------- */
/* The owner has taken online booking off in the panel and is handling tables
   himself. Everything that offers a booking comes off the page: the form, the
   button in the bar, the one in the hero, the one in the contact band and the
   link in the footer. The class only ever gets added, never removed, so a page
   that cannot reach the API keeps its buttons rather than losing them. */
.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; }

/* The contact band keeps its second button, which becomes the only one */
.bookings-off .contact-actions .btn.ghost { margin: 0 auto; }

/* ---------- The carte's own language ---------- */
/* Separate from the site's switch in the bar. A guest reads the dishes in
   Spanish while the rest of the page stays in French, which is what actually
   happens at a table in Rabat. Sits under the Kitchen / Bar tabs, quieter than
   them, because it is a preference rather than a place to go. */
.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: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 8px 16px; color: var(--para); opacity: .75;
  border-bottom: 1px 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(--pearl); }
.carte-lang button.active { opacity: 1; color: var(--brass); border-bottom-color: var(--brass); }
/* On the printed bands the ink is the wine-black, not the pearl */
.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 ink, because a guest recognises it
   before he reads it, and it inverts on hover the way every other button on
   the paper band does. Scoped under .reserve-panel because
   `.reserve-panel .btn.solid` sits on the same element and would otherwise
   win on specificity. */
.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 { background: #1fa855; }

.reserve-panel .btn.wa-btn:hover,
.reserve-panel .btn.wa-btn:focus-visible { background: #1a8f47; color: #1a8f47; }

.reserve-panel .btn.wa-btn:hover::after,
.reserve-panel .btn.wa-btn:focus-visible::after { background: var(--paper); }

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