/* Tuyet Frères design system.
   Everything here is taken off the house's own identity rather than invented:
   the midnight navy their printed drinks card is inked on, the champagne gold
   of the TF monogram, and the snow that is in the name itself — Tuyết. Type
   follows the mark: engraved letterspaced capitals over a fine serif, with a
   theatre-marquee voice reserved for the one fact that changes nightly, which
   is what plays on the stage.

   One motif, and it is used where it earns its place: the deco corner bracket,
   the stepped right-angle that frames every panel of their printed card. It is
   how the photographs are framed and how the booking card is closed, and that
   is all. A frame drawn around every heading stops being a signature and
   becomes wallpaper. */

:root {
  --ink: #0d1424;         /* nuit: the navy the drinks card is printed on */
  --ink-2: #070c17;       /* the deepest band */
  --panel: #121b2f;       /* banquette */
  --panel-2: #182339;
  --pearl: #f1eee5;       /* neige: the snow in the name, and every action */
  --pearl-dim: #cfd0c9;
  /* The paragraph voice. Cool, like the ground it sits on; pure grey goes
     muddy against navy. */
  --para: #aeb4c0;
  --brass: #d2a54e;       /* champagne: the gold of the monogram. Second voice */
  --brass-soft: rgba(210, 165, 78, 0.13);
  --wine: #63263c;        /* garnet plum. Surfaces and the promo strip only */
  --on-pearl: #10141f;    /* what sits on top of a snow fill */
  --line: rgba(241, 238, 229, 0.16);
  --line-soft: rgba(241, 238, 229, 0.08);
  --ok: #8fae8b;
  --err: #dfa0a4;

  /* The paper. Two bands of the site are printed rather than lit: the carte
     and the hours. Cool ivory, the stock the food menu is printed on, with a
     deep umber ink and a gold dark enough to hold on a light ground. */
  --paper: #f2efe6;
  --paper-2: #e9e4d5;
  --ink-on-paper: #221d12;
  --para-on-paper: #5b5343;
  /* 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. This clears 5:1
     against the darkest part of the sheet. */
  --gold-on-paper: #6d5212;
  --rule-on-paper: rgba(34, 29, 18, 0.16);

  /* Gilt. Champagne at the alpha where it warms a navy 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(210, 165, 78, 0.18), transparent 72%);
  --gilt-tl: radial-gradient(75% 60% at 10% 0%, rgba(210, 165, 78, 0.16), transparent 72%);
  --gilt-bc: radial-gradient(85% 65% at 50% 100%, rgba(210, 165, 78, 0.17), transparent 74%);
  --gilt-sweep: linear-gradient(104deg, transparent 6%, rgba(210, 165, 78, 0.14) 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(210, 165, 78, 0.15), rgba(210, 165, 78, 0.045) 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(210, 165, 78, 0.5) 18%, rgba(210, 165, 78, 0.5) 82%, transparent);

  /* Cinzel is the engraved capital the monogram is cut in; it only exists in
     caps, which is the point. Prata is the serif that reads at text size, for
     dish names and the lines the capitals would shout. */
  --display: 'Cinzel', 'Trajan Pro', Georgia, serif;
  --serif: 'Prata', Georgia, serif;
  --sans: 'Figtree', 'Segoe UI', system-ui, sans-serif;
  /* Limelight 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 the marquee over the stage, and it is never used as decoration
     inside a heading. */
  --script: 'Limelight', 'Cinzel', cursive;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* The deco corner bracket, drawn rather than imaged: two strokes at each
     corner of a frame. --ck is the stroke, --cl the reach of each arm; both
     are read at use time, so a hover can rewrite either on the parent. */
  --ck: rgba(210, 165, 78, 0.5);
  --cl: 16px;
  --corners:
    linear-gradient(var(--ck), var(--ck)) left top / var(--cl) 1px,
    linear-gradient(var(--ck), var(--ck)) left top / 1px var(--cl),
    linear-gradient(var(--ck), var(--ck)) right top / var(--cl) 1px,
    linear-gradient(var(--ck), var(--ck)) right top / 1px var(--cl),
    linear-gradient(var(--ck), var(--ck)) left bottom / var(--cl) 1px,
    linear-gradient(var(--ck), var(--ck)) left bottom / 1px var(--cl),
    linear-gradient(var(--ck), var(--ck)) right bottom / var(--cl) 1px,
    linear-gradient(var(--ck), var(--ck)) right bottom / 1px var(--cl);

  /* The night behind everything: a scatter of faint snow-stars on the navy,
     two sizes so it never tiles visibly, and one warm pool of stage light
     rising from the foot of the window. All drawn, so the whole ground costs
     nothing and holds at any width. */
  --stars: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='340' height='300'%3E%3Cg fill='%23f1eee5'%3E%3Ccircle cx='44' cy='63' r='1' opacity='.10'/%3E%3Ccircle cx='228' cy='27' r='.8' opacity='.07'/%3E%3Ccircle cx='139' cy='189' r='1.2' opacity='.06'/%3E%3Ccircle cx='296' cy='123' r='.9' opacity='.08'/%3E%3Ccircle cx='99' cy='261' r='1.2' opacity='.05'/%3E%3Ccircle cx='201' cy='99' r='.8' opacity='.06'/%3E%3Ccircle cx='310' cy='243' r='1' opacity='.07'/%3E%3Ccircle cx='23' cy='168' r='.8' opacity='.05'/%3E%3C/g%3E%3C/svg%3E");
  --slats: var(--stars);
  --lamp: radial-gradient(closest-side at 50% 108%,
    rgba(210, 165, 78, 0.14), rgba(210, 165, 78, 0.04) 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 cut in engraved capitals, so the headings are too. Cinzel
   only really exists in caps, which keeps every heading honest to the mark:
   letterspaced, never tight, and smaller than a lowercase face would be at the
   same weight because capitals already carry the size. */
h1, h2, h3 {
  font-family: var(--display);
  font-weight: 600;
  text-transform: uppercase;
  color: var(--pearl);
  line-height: 1.14;
}

/* The eyebrow states a fact about the house, never a mood word, and it hangs
   from a gold lozenge — the diamond their printed card pins between columns.
   The heading sits under it, left, closed by a short double rule: the device
   the drinks card closes its own headings with. 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. */
.kicker {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--sans); font-weight: 600;
  font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--brass); line-height: 1;
}
.kicker::before {
  content: ''; flex: none; width: 7px; height: 7px;
  background: var(--brass); opacity: 0.85;
  transform: rotate(45deg);
}
/* Centred heads centre the lozenge line with the words */
.section-head.center .kicker { justify-content: center; }

.section-title {
  font-size: clamp(24px, 3.3vw, 44px);
  margin: 24px 0 0;
  letter-spacing: 0.12em;
  font-weight: 600;
  max-width: 24ch;
  position: relative;
  padding-bottom: 22px;
}
/* The double rule that closes the head, gold over gold, short of the measure */
.section-title::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 74px; height: 5px;
  border-top: 1px solid rgba(210, 165, 78, 0.75);
  border-bottom: 1px solid rgba(210, 165, 78, 0.35);
}
.section-head.center .section-title { max-width: none; }
.section-head.center .section-title::after { left: 50%; transform: translateX(-50%); }
.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(--serif); }

/* ---------- 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 ---------- */
/* The double frame: a rule, and a second rule one step inside it, which is how
   every panel of the printed drinks card is framed. A rectangle on its own
   reads as a default and a pill reads as everybody else's; the inner line is
   what makes this the house's rectangle. The outer line is the border; the
   inner one is ::after, inset and independent, so a fill can pass between the
   two on hover and read as ink flooding the frame. */
.btn {
  display: inline-block;
  position: relative;
  z-index: 0;
  padding: 17px 42px;
  border: 1px solid rgba(241, 238, 229, 0.55);
  border-radius: 0;
  background: rgba(7, 12, 23, 0.6);
  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), border-color 0.45s var(--ease);
}
.btn::after {
  content: '';
  position: absolute; inset: 3px; z-index: -1;
  border: 1px solid rgba(241, 238, 229, 0.28);
  transition: border-color 0.45s var(--ease);
  pointer-events: none;
}
.btn:hover { color: var(--on-pearl); background: var(--pearl); border-color: var(--pearl); }
.btn:hover::after { border-color: rgba(16, 20, 31, 0.35); }

.btn.solid { background: var(--pearl); border-color: var(--pearl); color: var(--on-pearl); font-weight: 600; }
.btn.solid::after { border-color: rgba(16, 20, 31, 0.3); }
.btn.solid:hover { background: var(--brass); border-color: var(--brass); color: var(--on-pearl); }
.btn.solid:hover::after { border-color: rgba(16, 20, 31, 0.35); }

.btn.ghost { background: transparent; border-color: var(--line); color: var(--para); }
.btn.ghost:hover { background: var(--pearl); border-color: var(--pearl); color: var(--on-pearl); }

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

.btn.danger { background: var(--wine); border-color: var(--wine); color: #fff; }
.btn.danger::after { border-color: rgba(255, 255, 255, 0.25); }
.btn.danger:hover { background: var(--err); border-color: var(--err); color: var(--on-pearl); }

/* The chips in the bar and the carte's tabs stay plain rectangles: the double
   frame belongs to the actions, and a shape repeated on everything pressable
   stops being a shape. */
.nav-cta, .nav-auth, .menu-tabs button { 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(210, 165, 78, 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(7, 12, 23, 0.95) 0%, rgba(50, 30, 46, 0.78) 52%, rgba(7, 12, 23, 0.96) 100%),
    var(--slats), var(--ink-2);
}

/* ---------- Paper ---------- */
/* The carte and the hours are printed things, so they are printed: the cool
   ivory stock the house's own food menu is printed on, umber ink, gold 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: a whisper of fibre drawn with
   turbulence rather than photographed, and a touch more light at the head of
   the sheet than the foot, the way a menu card sits under a lamp. */
section.paper {
  background-color: var(--paper);
  background-image:
    radial-gradient(100% 68% at 50% -8%, rgba(255, 255, 255, 0.55), transparent 68%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='7'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.05'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: auto, 240px 240px;
  background-position: center, top left;
  background-repeat: no-repeat, repeat;
  color: var(--para-on-paper);
}
/* A gold hairline is invisible on ivory; the paper bands are closed with
   their own ink instead. */
.paper::before {
  background: linear-gradient(90deg, transparent, rgba(34, 29, 18, 0.28) 18%, rgba(34, 29, 18, 0.28) 82%, transparent) !important;
}
.paper .kicker { color: var(--gold-on-paper); }
.paper .kicker::before { background: var(--gold-on-paper); }
.paper .section-title::after {
  border-top-color: rgba(109, 82, 18, 0.7);
  border-bottom-color: rgba(109, 82, 18, 0.32);
}
.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(34, 29, 18, 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(34, 29, 18, 0.22); }
.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); }
/* 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, 239, 230, 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 two rules are the ink of the band */
.paper .btn { background: transparent; border-color: rgba(34, 29, 18, 0.55); color: var(--ink-on-paper); }
.paper .btn::after { border-color: rgba(34, 29, 18, 0.22); }
.paper .btn:hover { background: var(--ink-on-paper); border-color: var(--ink-on-paper); color: var(--paper); }
.paper .btn:hover::after { border-color: rgba(242, 239, 230, 0.3); }
.paper .btn.solid { background: var(--ink-on-paper); border-color: var(--ink-on-paper); color: var(--paper); }
.paper .btn.solid::after { border-color: rgba(242, 239, 230, 0.3); }
.paper .btn.solid:hover { background: var(--gold-on-paper); border-color: var(--gold-on-paper); color: 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(7, 12, 23, 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 swash again, in miniature: the underline dips rather than running flat */
.nav-links a::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 2px; height: 5px;
  /* The marquee, in miniature: a run of bulbs rather than a line */
  background: repeat-x left center / 8px 3px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='3'%3E%3Ccircle cx='2' cy='1.5' r='1.3' fill='%23d2a54e'/%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(7, 12, 23, 0.74), rgba(7, 12, 23, 0.34) 62%, transparent 80%),
    linear-gradient(180deg, transparent 20%, rgba(7, 12, 23, 0.3) 42%, rgba(7, 12, 23, 0.3) 64%, transparent 84%),
    radial-gradient(125% 95% at 50% 44%, transparent 0%, rgba(7, 12, 23, 0.3) 74%, rgba(7, 12, 23, 0.76) 100%),
    linear-gradient(180deg, rgba(7, 12, 23, 0.5) 0%, rgba(7, 12, 23, 0.08) 42%, rgba(7, 12, 23, 0.78) 100%);
}
.hero-content { position: relative; z-index: 2; padding: 0 24px; }
/* The house name, set as the wordmark is: a Didone that starts wide and pulls
   itself tight as it arrives. One orchestrated moment, then nothing. */
.hero-script {
  font-family: var(--display);
  font-size: clamp(28px, 4.6vw, 66px);
  color: var(--pearl);
  font-weight: 600;
  text-transform: uppercase;
  line-height: 1.22;
  letter-spacing: 0.14em;
  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.3em; }
  to { opacity: 1; transform: none; letter-spacing: 0.14em; }
}
@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;
  background: var(--corners);
  background-repeat: no-repeat;
  transition: inset 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; --ck: 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: 14.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.32em; text-indent: 0.32em;
  color: var(--pearl);
  line-height: 1.5;
  margin: 0;
}
.menu-cat-sub {
  font-family: var(--serif);
  color: var(--brass);
  font-size: 14.5px;
  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. */
.menu-item { display: flex; align-items: baseline; gap: 10px; padding: 7px 0; }
.menu-item .mi-name { font-family: var(--serif); font-size: 16px; font-weight: 400; color: var(--pearl); white-space: nowrap; }
.menu-item .mi-dots { flex: 1; border-bottom: 1px dotted rgba(174, 180, 192, 0.32); transform: translateY(-5px); }
.menu-item .mi-price { font-family: var(--display); font-weight: 600; color: var(--brass); font-size: 13.5px; letter-spacing: 0.04em; 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); }
/* The full carte is centred in a tighter measure than a hero band: three
   columns of dishes read best grouped, not stretched wall to wall, so the
   rightmost price column keeps clear air to the section edge. */
.menu-page > .container { width: min(1120px, 90vw); }
@media (min-width: 1500px) { .menu-page > .container { width: 1180px; } }
.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:
    var(--gilt-sweep),
    linear-gradient(102deg, rgba(7, 12, 23, 0.96) 0%, rgba(20, 28, 46, 0.9) 52%, rgba(7, 12, 23, 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(24px, 2.8vw, 38px); }
.formule-copy > p { color: var(--para); margin-bottom: 26px; max-width: 44ch; }
.formule-time {
  font-family: var(--serif); font-size: 19px;
  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(210, 165, 78, 0.06);
  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;
  --ck: rgba(241, 238, 229, 0.18); --cl: 13px;
  background: var(--corners);
  background-repeat: no-repeat;
}
.fm-row { display: flex; align-items: baseline; gap: 12px; padding: 10px 0; }
.fm-name { font-family: var(--serif); font-size: 16.5px; color: var(--pearl); }
.fm-dots { flex: 1; border-bottom: 1px dotted rgba(174, 180, 192, 0.3); transform: translateY(-4px); }
.fm-price { font-family: var(--display); font-weight: 600; 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(210, 165, 78, 0.06); }
.prog-day.today { background: rgba(210, 165, 78, 0.10); }
.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: 15px; line-height: 1.35;
  letter-spacing: 0.04em;
  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: 13.5px; } }

/* ---------- 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(7, 12, 23, 0.92));
}
/* The corner brackets, matching the framed photographs elsewhere */
.space-card::after {
  content: ''; position: absolute; inset: 12px; z-index: 3; pointer-events: none;
  background: var(--corners);
  background-repeat: no-repeat;
  transition: inset 0.7s var(--ease);
}
.space-card:hover::after { inset: 18px; --ck: 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;
  --ck: rgba(241, 238, 229, 0.22); --cl: 13px;
  background: var(--corners);
  background-repeat: no-repeat;
  transition: inset 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; --ck: 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(7, 12, 23, 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: 13px; line-height: 1.3; letter-spacing: 0.04em; color: var(--brass); }
.hours-list .dots { flex: 1; border-bottom: 1px dotted rgba(174, 180, 192, 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(--serif); }
.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(7, 12, 23, 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(--brass); 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(--gold-on-paper); 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(7, 12, 23, .62), rgba(7, 12, 23, .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, .55), transparent 68%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='7'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.05'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: auto, 240px 240px;
  background-position: center, top left;
  background-repeat: no-repeat, repeat;
  color: var(--para-on-paper);
  border: 1px solid rgba(34, 29, 18, .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;
  --ck: rgba(34, 29, 18, 0.3); --cl: 15px;
  background: var(--corners);
  background-repeat: no-repeat;
}
.reserve-panel .kicker { color: var(--gold-on-paper); }
.reserve-panel .kicker::before { background: var(--gold-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(34, 29, 18, .22);
  color: var(--ink-on-paper);
}
.reserve-panel .form-field input::placeholder { color: rgba(91, 83, 67, .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(34, 29, 18, .2);
  box-shadow: 0 20px 46px rgba(0, 0, 0, .3);
}
.reserve-panel .timepick-slot { background: rgba(34, 29, 18, .05); color: var(--para-on-paper); }
.reserve-panel .timepick-slot:hover { background: rgba(109, 82, 18, .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: transparent; border-color: rgba(34, 29, 18, 0.55); color: var(--ink-on-paper); }
.reserve-panel .btn::after { border-color: rgba(34, 29, 18, 0.22); }
.reserve-panel .btn:hover { background: var(--ink-on-paper); border-color: var(--ink-on-paper); color: var(--paper); }
.reserve-panel .btn:hover::after { border-color: rgba(242, 239, 230, 0.3); }
.reserve-panel .btn.solid { background: var(--ink-on-paper); border-color: var(--ink-on-paper); color: var(--paper); }
.reserve-panel .btn.solid::after { border-color: rgba(242, 239, 230, 0.3); }
.reserve-panel .btn.solid:hover { background: var(--gold-on-paper); border-color: var(--gold-on-paper); color: var(--paper); }
.reserve-panel .btn.solid:hover::after { border-color: rgba(242, 239, 230, 0.35); }
.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(7, 12, 23, 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(174, 180, 192, 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(174, 180, 192, 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(7, 12, 23, 0.76) 0%, rgba(7, 12, 23, 0.54) 45%, rgba(7, 12, 23, 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(26px, 4vw, 52px); position: relative; z-index: 2; letter-spacing: 0.14em; }
.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(34, 29, 18, .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(7, 12, 23, .70), rgba(7, 12, 23, .84) 55%, rgba(7, 12, 23, .95));
}
.page-account .nav {
  background: rgba(7, 12, 23, 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(7, 12, 23, .6); }

.auth-wrap { display: flex; justify-content: center; width: 100%; }
.auth-card {
  position: relative;
  width: min(580px, 100%); background: rgba(15, 21, 36, 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; --ck: rgba(241, 238, 229, 0.14); --cl: 13px; background: var(--corners); background-repeat: no-repeat; }
.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: 20px; margin: 0 0 6px; padding-bottom: 16px; }
.auth-card .section-title::after { left: 50%; transform: translateX(-50%); }
.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(7, 12, 23, 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(7, 12, 23, 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(--serif); font-size: 21px; font-weight: 400; margin-bottom: 8px; color: var(--pearl); }

.auth-form select {
  width: 100%; background: rgba(7, 12, 23, 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(15, 21, 36, .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(--serif); font-size: 19px; font-weight: 400; text-transform: none; 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), #3a1a2c 62%, var(--panel)); border-color: rgba(210, 165, 78, 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(15, 21, 36, .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: 17px; font-weight: 600; 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(210, 165, 78, 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, 160, 164, 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(7, 12, 23, .93), rgba(20, 28, 46, .86) 45%, rgba(7, 12, 23, .95));
}
.contact-band > .container { position: relative; }
.contact-inner { text-align: center; max-width: 1080px; margin: 0 auto; }
.contact-inner .section-title { font-size: clamp(24px, 3.2vw, 42px); }
.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(15, 21, 36, 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(20, 28, 46, 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(15, 21, 36, .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(15, 21, 36, .9); border: 1px solid rgba(210, 165, 78, .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(--serif); font-size: 16.5px; font-weight: 400; text-transform: none; 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: 15px; font-weight: 600; }
.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(7, 12, 23, 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(241, 238, 229, 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(241, 238, 229, 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(7, 12, 23, 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 { border-color: #1fa855; }
.reserve-panel .btn.wa-btn::after { border-color: rgba(255, 255, 255, 0.3); }

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

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