/* =========================================================================
   Havana — Rabat Agdal
   =========================================================================
   The palette is the room, taken from photographs of the room rather than from
   the venue's Instagram, which is graded almost to black and describes a mood
   instead of a place. Walk in and you find white painted brick, cream slat
   panelling, a pale oak herringbone floor, greige banquettes, brass shelf
   frames and deep green cushions, all under warm globe lights.

   So: bone ground, brass hairlines, emerald actions, warm charcoal type.

   Brass is the brand. Emerald is the action. Every button, link underline and
   focus ring is green; brass is kept for the mark, the rules and the prices,
   so the two never compete for the same job.

   The one dark thing on the page is their own disc, which is dark because
   their logo is. It reads as an object sitting on plaster rather than as a
   theme, and it is the only place the site raises its voice.

   Assets are pinned with ?v=N in the HTML. After editing this file, bump every
   ?v= (they move together) or a returning browser keeps the old stylesheet.
   ========================================================================= */

@import url('/fonts/fonts.css?v=2');

:root {
  --bg: #F3EEE4;          /* the painted brick and the slat panelling */
  --bg-2: #EDE6D9;        /* one step down, for a band */
  --panel: #FBF8F2;       /* a raised card, lighter than the wall */
  --oak: #E4D8C4;         /* the herringbone floor */
  --ink: #221F1C;         /* the chairs and the black vases; never pure black */
  --ink-2: #4A443D;
  --para: #5E574E;        /* body copy that is not a heading */
  --brass: #A8823C;       /* the shelf frames. Rules, icons, kickers, borders */
  --brass-lift: #C8A25C;
  --brass-dim: rgba(168, 130, 60, 0.34);
  /* The same brass, darkened for anything that has to be READ. #A8823C is a
     beautiful line and a poor letter: on bone it measures 2.9:1, under AA
     before any background picture is involved. Prices are the most important
     text on a menu, so they get this instead. */
  --brass-text: #705519;
  --emerald: #1F5D48;     /* the banquette cushions */
  --emerald-lift: #2A7A5E;
  --line: rgba(168, 130, 60, 0.28);
  --line-soft: rgba(34, 31, 28, 0.12);
  --err: #A8341C;
  --ok: #1F5D48;
  --disc: #0C0B0D;        /* their logo, and nothing else */

  --display: 'Oriental Chicken', 'Helvetica Neue', sans-serif;
  /* Everything you click: the nav, the buttons, the toggles. Kept apart from
     --ui so that body copy and form fields stay in the plain grotesque, which
     is what makes a long carte and a booking form readable. */
  --ui-display: 'Hey Comic', 'Helvetica Neue', sans-serif;
  /* Oriental Chicken draws a 0.2em word space against letters that run close
     to a full em, so words collide at display size: "NOBODY COMES" sets as
     "NOBODYCOMES". Every rule that uses --display opens the space back up by
     this much. Change the face and this goes with it. */
  --display-ws: 0.30em;
  --serif: 'Sentient', Georgia, serif;
  --ui: 'Switzer', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --wrap: 1100px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --nav-h: 82px;
}

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

html { scroll-behavior: smooth; scroll-padding-top: var(--nav-h); }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--ui);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Plaster, not a flat fill. Two warm pools where the globe lights hang, and a
   fine grain over both so the gradients never band on a large screen. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(90% 55% at 50% -10%, rgba(255, 244, 222, 0.95), transparent 60%),
    radial-gradient(60% 45% at 90% 78%, rgba(228, 216, 196, 0.55), transparent 65%),
    var(--bg);
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.35;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.16'/%3E%3C/svg%3E");
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
::selection { background: var(--emerald); color: #FFF; }

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

.container { width: min(var(--wrap), calc(100% - 44px)); margin-inline: auto; }
.hidden { display: none !important; }

/* --- Type ---------------------------------------------------------------- */
h1, h2, h3 { font-weight: 400; line-height: 1.08; letter-spacing: 0; }

.section-title {
  font-family: var(--display);
  font-size: clamp(2.2rem, 5.6vw, 3.5rem);
  font-weight: 400;
  text-transform: uppercase;
  color: var(--ink);
  word-spacing: var(--display-ws);
}

/* One word per heading lifted into the serif italic, in brass. It is the only
   emphasis the site uses, so it has to stay rare to keep working. */
.t-script {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 0.92em;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--brass);
}

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

/* The ring that holds a section's numeral. Their logo, at 34px. */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--ui);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--brass-text);
}

.kicker::before {
  content: attr(data-n);
  flex: none;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--brass-dim);
  border-radius: 50%;
  font-family: var(--serif);
  font-size: 0.74rem;
  letter-spacing: 0;
  color: var(--brass);
}

.kicker:not([data-n])::before { display: none; }

.section-head { margin-bottom: 46px; }
.section-head .section-title { margin-top: 16px; }
.section-head.center { text-align: center; }
.section-head.center .kicker { justify-content: center; }

.section-sub {
  margin-top: 14px;
  max-width: 56ch;
  color: var(--para);
  font-size: 1rem;
}

.section-head.center .section-sub { margin-inline: auto; }

section { padding: 106px 0; position: relative; }

/* --- Buttons ------------------------------------------------------------- */
/* Sharp rectangles with a hairline. Nothing on this site is a pill. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 30px;
  border: 1px solid var(--brass-dim);
  background: transparent;
  color: var(--ink);
  font-family: var(--ui-display);
  font-size: 0.86rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.4s var(--ease), border-color 0.4s var(--ease);
}

/* The fill arrives from the bottom rather than fading in, which reads as a
   deliberate press instead of a hover state. */
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--emerald);
  transform: translateY(101%);
  transition: transform 0.45s var(--ease);
}

.btn:hover { color: #FFF; border-color: var(--emerald); }
.btn:hover::before { transform: translateY(0); }

.btn.solid { background: var(--emerald); border-color: var(--emerald); color: #FFF; }
.btn.solid::before { background: var(--ink); }
.btn.solid:hover { border-color: var(--ink); }

.btn.ghost { border-color: var(--line-soft); color: var(--para); }
.btn.ghost:hover { color: var(--ink); border-color: var(--brass-dim); }
.btn.ghost::before { background: rgba(34, 31, 28, 0.06); }

.btn.danger { border-color: rgba(168, 52, 28, 0.4); color: var(--err); }
.btn.danger::before { background: var(--err); }
.btn.danger:hover { color: #FFF; border-color: var(--err); }

.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn:disabled::before { transform: translateY(101%); }

/* --- Reveal -------------------------------------------------------------- */
.reveal, .reveal-left {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}

.reveal-left { transform: translateX(-18px); }
.reveal.visible, .reveal-left.visible { opacity: 1; transform: none; }
.reveal[data-delay='1'], .reveal-left[data-delay='1'] { transition-delay: 0.10s; }
.reveal[data-delay='2'], .reveal-left[data-delay='2'] { transition-delay: 0.20s; }
.reveal[data-delay='3'], .reveal-left[data-delay='3'] { transition-delay: 0.30s; }

/* --- Promotional strip --------------------------------------------------- */
.promo-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 120;
  height: 38px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--emerald);
}

.promo-track { display: flex; gap: 70px; white-space: nowrap; animation: promo 34s linear infinite; }
.promo-banner:hover .promo-track { animation-play-state: paused; }

.promo-banner-text {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #FFF;
}

a.promo-banner-text:hover { color: var(--brass-lift); }

@keyframes promo { from { transform: translateX(0); } to { transform: translateX(-50%); } }

body.has-banner .nav { top: 38px; }

/* --- Nav ----------------------------------------------------------------- */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 110;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  transition: background 0.45s var(--ease), height 0.45s var(--ease), border-color 0.45s var(--ease);
  border-bottom: 1px solid transparent;
}

.nav.scrolled {
  height: 66px;
  background: rgba(243, 238, 228, 0.92);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
}

.nav .container { display: flex; align-items: center; gap: 26px; }
.nav-inner { display: contents; }

.nav-logo { flex: none; }
.nav-logo img { height: 30px; width: auto; transition: height 0.45s var(--ease); }
.nav.scrolled .nav-logo img { height: 24px; }

.nav-links {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 28px;
  margin-left: auto;
}

.nav-right { list-style: none; display: flex; align-items: center; gap: 20px; }
.nav-links li { position: relative; }

.nav-links a, .nav-right a {
  font-family: var(--ui-display);
  font-size: 0.86rem;
  font-weight: 400;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-2);
  transition: color 0.3s var(--ease);
}

.nav-links > li > a, .nav-right > li > a { display: inline-block; padding: 6px 0; }
.nav-links a:hover, .nav-right a:hover { color: var(--ink); }

/* Underline grows from the left rather than fading, so it tracks the cursor */
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1.5px;
  width: 0;
  background: var(--emerald);
  transition: width 0.35s var(--ease);
}

.nav-links a:hover::after { width: 100%; }

 /* Booking is the one thing the nav is for, so it is the only filled button
    up there. Sign in and sign up carry the same green as an outline: same
    family, one step quieter. */
.nav-cta {
  padding: 10px 22px !important;
  background: var(--emerald);
  border: 1px solid var(--emerald);
  color: #FFF !important;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease);
}

.nav-cta:hover { background: var(--ink); border-color: var(--ink); }
.nav-cta::after { display: none; }

.nav-deals { color: var(--brass) !important; }

.nav-right .nav-auth {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px !important;
  border: 1.5px solid var(--emerald-lift);
  color: var(--emerald);
  transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}

.nav-right .nav-auth:hover { background: var(--emerald); border-color: var(--emerald); color: #FFF; }
.nav-auth::after { display: none; }

/* Signed in, the label becomes the guest's own name, so it reads as a place to
   go rather than an action to take. */
.nav-right .nav-auth.signed-in { background: rgba(31, 93, 72, 0.10); }

.nav-links .mobile-only { display: none; }

.burger { display: none; flex-direction: column; gap: 5px; padding: 8px; margin-left: auto; }
.burger span { display: block; width: 24px; height: 1.5px; background: var(--ink); transition: transform 0.35s var(--ease), opacity 0.25s; }
.burger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* --- Language switch ----------------------------------------------------- */
.lang-switch { position: relative; display: inline-flex; border: 1px solid var(--line); padding: 3px; }

.lang-switch::before {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: calc(50% - 3px);
  height: calc(100% - 6px);
  background: var(--emerald);
  transition: transform 0.35s var(--ease);
}

.lang-switch.on-fr::before { transform: translateX(100%); }

.lang-switch button {
  position: relative;
  font-family: var(--ui-display);
  padding: 4px 11px;
  font-size: 0.76rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--para);
  transition: color 0.3s var(--ease);
}

.lang-switch button.active { color: #FFF; }

/* =========================================================================
   Hero — the one bold thing on the site
   ========================================================================= */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  /* The bottom padding is what keeps the content clear of the room band
     below it, rather than the band being faded until it stops competing. */
  padding: calc(var(--nav-h) + 40px) 0 90px;
  overflow: hidden;
}

/* The room behind the plaster, thrown far out of focus. Blurred it stops being
   a photograph and becomes light and colour, which is what a wall behind a
   sign should be: the disc and the headline stay the only things in focus.
   The scrim below does the work of keeping type readable, so the picture never
   has to be dimmed into a grey fog. */
.hero-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }

.hero-bg img, .hero-bg video, .hero video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.92;
  /* Scaled up because a blur samples past its own edges and would otherwise
     leave a pale border all the way round. */
  transform: scale(1.04);
  /* Just enough to take the edge off. The source is 1024px wide and a wide
     screen already upscales it, which softens it before any filter runs, so
     the CSS blur has to be small or the two compound into mush. */
  filter: blur(2px) saturate(1.02);
}

.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(46% 40% at 50% 62%, rgba(246, 241, 231, 0.94), rgba(246, 241, 231, 0.72) 60%, transparent),
    linear-gradient(180deg, var(--bg) 0%, rgba(246, 241, 231, 0.42) 18%, rgba(246, 241, 231, 0.52) 60%, rgba(246, 241, 231, 0.86) 88%, var(--bg));
}

.hero-content { position: relative; z-index: 2; text-align: center; }

.hero-content > * { opacity: 0; animation: rise 1.1s var(--ease) forwards; }
.hero-content > *:nth-child(2) { animation-delay: 0.5s; }
.hero-content > *:nth-child(3) { animation-delay: 0.7s; }
.hero-content > *:nth-child(4) { animation-delay: 0.9s; }

@keyframes rise {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: none; }
}

/* The disc: their mark, at the size of a room, and the only dark object on the
   page. The photograph turns slowly inside it while the wordmark sits still.
   The double ring is the brass frame standing off the brick, in CSS. */
.hero-disc {
  position: relative;
  width: min(52vmin, 360px);
  aspect-ratio: 1;
  margin: 0 auto 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--disc);
  box-shadow:
    0 34px 80px -30px rgba(34, 31, 28, 0.5),
    0 0 0 1px rgba(168, 130, 60, 0.6);
}

.hero-disc::before {
  content: '';
  position: absolute;
  inset: -18px;
  border-radius: 50%;
  border: 1px solid var(--brass-dim);
  pointer-events: none;
}

.hero-disc img.kb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  opacity: 0.42;
  filter: saturate(0.8);
  animation: turn 64s linear infinite;
}

@keyframes turn { to { transform: rotate(360deg); } }

.hero-disc::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(12, 11, 13, 0.35) 35%, rgba(12, 11, 13, 0.9) 78%);
}

.hero-mark { position: relative; z-index: 2; width: 62%; }

/* Where the H site puts a script word, this puts the wall lettering. */
.hero-script {
  font-family: var(--display);
  /* One line, at whatever size one line allows. Sized in vw rather than rem so
     the line scales with the window instead of wrapping at a fixed breakpoint;
     the cap stops it becoming a billboard on a very wide screen. Phones get
     their own rule further down, where one line would be unreadably small. */
  font-size: min(4.05vw, 3.5rem);
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.06;
  white-space: nowrap;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 auto 16px;
  word-spacing: var(--display-ws);
}

.hero-tag {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 32px;
}

.hero-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.hero-actions .btn { min-width: 190px; }

/* Live state: whether the room is open right now, which is real information
   at a place whose night starts at five and ends at two. */
.hero-hours {
  margin-top: 34px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--para);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.hero-hours i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--emerald-lift);
  box-shadow: 0 0 0 4px rgba(42, 122, 94, 0.18);
  animation: pulse 2.6s ease-in-out infinite;
}

@keyframes pulse { 50% { box-shadow: 0 0 0 9px rgba(42, 122, 94, 0); } }

.hero-video { position: absolute; inset: 0; }
.kb { animation: kenburns 26s ease-in-out infinite alternate; }
@keyframes kenburns { to { transform: scale(1.09); } }

/* --- Inner page hero ----------------------------------------------------- */
.page-hero {
  position: relative;
  min-height: 46svh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: calc(var(--nav-h) + 56px) 0 54px;
  overflow: hidden;
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
}

.page-hero .hero-bg { position: absolute; inset: 0; height: 100%; -webkit-mask-image: none; mask-image: none; }

.page-hero .hero-bg img, .page-hero .hero-video {
  opacity: 0.95;
  transform: scale(1.02);
  filter: blur(1px) saturate(1.02);
}

.page-hero .hero-bg::after {
  background:
    radial-gradient(48% 64% at 50% 58%, rgba(246, 241, 231, 0.88), rgba(246, 241, 231, 0.62) 62%, transparent),
    linear-gradient(180deg, var(--bg) 0%, rgba(246, 241, 231, 0.46) 26%, rgba(246, 241, 231, 0.58) 70%, var(--bg-2));
}
.page-hero .kicker { position: relative; z-index: 2; }

.page-hero h1 {
  position: relative;
  z-index: 2;
  margin-top: 16px;
  font-family: var(--display);
  font-size: clamp(2.4rem, 7vw, 4rem);
  font-weight: 400;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  word-spacing: var(--display-ws);
}

/* =========================================================================
   About
   ========================================================================= */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; }
.about-text p { color: var(--para); margin-bottom: 20px; }

.about-sign {
  display: inline-block;
  margin-top: 12px;
  font-family: var(--display);
  font-size: 1.3rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass);
  word-spacing: var(--display-ws);
}

.about-images { position: relative; }

/* The passe-partout: a hairline that sits a little outside the picture rather
   than on it, the way the brass frames stand off the brick in the room. */
.img-frame { position: relative; overflow: hidden; background: var(--oak); }

.img-frame::after {
  content: '';
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(251, 248, 242, 0.4);
  pointer-events: none;
  transition: inset 0.6s var(--ease);
}

.img-frame img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.img-frame:hover img { transform: scale(1.05); }
.img-frame:hover::after { inset: 18px; }

.about-images .img-main { aspect-ratio: 4 / 5; box-shadow: 0 24px 50px -30px rgba(34, 31, 28, 0.5); }

.about-images .img-accent {
  position: absolute;
  right: -34px;
  bottom: -46px;
  width: 46%;
  aspect-ratio: 3 / 4;
  border: 7px solid var(--bg);
  box-shadow: 0 20px 40px -26px rgba(34, 31, 28, 0.5);
}

/* =========================================================================
   Menu
   ========================================================================= */
.menu-section { position: relative; }
.menu-section:not(#menu) { padding-top: 60px; }

/* The carte band on the home page carries the room behind it, blurred to the
   same 2px as the hero. The scrim over it is much heavier than the hero's,
   because this section holds two columns of dish names and prices rather than
   one headline, and legibility beats atmosphere every time. */
#menu.menu-section {
  background: var(--bg-2);
  border-block: 1px solid var(--line);
  overflow: hidden;
  isolation: isolate;
}

#menu.menu-section::before {
  content: '';
  position: absolute;
  /* Only as tall as the band that shows it. Covering the whole section would
     scale the photograph to a 1900x1800 box and leave the visible top 430px
     showing a featureless sliver of it. */
  inset: 0 0 auto 0;
  height: 560px;
  z-index: -2;
  background: url('/images/menu-bg.jpg?v=5') center / cover no-repeat;
  /* Scaled because the blur samples past its own edges */
  transform: scale(1.02);
  filter: blur(1px) saturate(1);
}

#menu.menu-section::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  /* The picture lives where there is air, and gets out of the way before the
     carte starts. A photograph behind two columns of dish names and prices is
     a straight fight between atmosphere and legibility, and on a menu the
     prices win: measured against the composite, body text and prices only
     clear 4.5:1 once the scrim is near-opaque, at which point the picture is
     gone anyway. So it is strong across the heading and the Kitchen/Bar tabs,
     and close to plain plaster over the columns.

     One layer, not two: stacked scrims of the same colour compound, and
     0.88 over 0.86 leaves 1.7% of the photograph. */
  background:
    linear-gradient(180deg,
      rgba(237, 230, 217, 0.84) 0,
      rgba(237, 230, 217, 0.58) 70px,
      rgba(237, 230, 217, 0.62) 275px,
      rgba(237, 230, 217, 0.95) 430px,
      rgba(237, 230, 217, 0.95) calc(100% - 60px),
      var(--bg-2) 100%);
}

.menu-tabs { display: flex; width: fit-content; margin: 0 auto 46px; border: 1px solid var(--line); background: var(--panel); }

.menu-tabs button {
  font-family: var(--ui-display);
  padding: 12px 30px;
  font-size: 0.84rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--para);
  transition: color 0.3s var(--ease), background 0.3s var(--ease);
}

.menu-tabs button.active { background: var(--emerald); color: #FFF; }

.menu-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 54px 60px; }

/* The kicker is 0.68rem, and small brass type over a visible photograph tops
   out around 2.2:1 no matter how the scrim is tuned. In the one section that
   has a picture behind its heading it takes the ink colour instead, which
   measures 5.2:1. The ring keeps the brass: it is a graphic, not a word. */
#menu .kicker { color: var(--ink); }

.menu-cat h3 {
  font-family: var(--display);
  font-size: 1.44rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink);
  padding-bottom: 14px;
  position: relative;
  word-spacing: var(--display-ws);
}

.menu-cat h3::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 42px;
  height: 2px;
  background: var(--brass);
}

.menu-cat-sub { margin: 12px 0 20px; font-size: 0.9rem; font-style: italic; color: var(--para); font-family: var(--serif); }

.menu-item { display: flex; align-items: baseline; gap: 10px; margin-top: 20px; }

.menu-item .mi-name { font-family: var(--serif); font-size: 1.04rem; color: var(--ink); flex: none; max-width: 74%; }
.menu-item .mi-dots { flex: 1; border-bottom: 1px dotted rgba(168, 130, 60, 0.45); transform: translateY(-4px); }
.menu-item .mi-price { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 1.02rem; color: var(--brass-text); white-space: nowrap; flex: none; }

.menu-item-desc { margin-top: 5px; font-size: 0.88rem; line-height: 1.6; color: var(--para); max-width: 52ch; }

/* A dish on a member price: the old one struck through, the new one in green,
   so it reads as a change rather than as two prices. */
.mi-was { color: var(--para); opacity: 0.65; margin-right: 8px; font-style: normal; }
.mi-deal { color: var(--emerald); font-weight: 500; }

/* Spirits are quoted twice, glass and bottle */
.menu-item.mi-head { margin-top: 26px; }

.menu-item.mi-head .mi-price,
.menu-cat.two-way .mi-head .mi-price {
  font-family: var(--ui);
  font-style: normal;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--para);
}

.menu-cat.two-way .menu-item { gap: 14px; }
.menu-cat.two-way .mi-name { max-width: 58%; }
.menu-cat.two-way .mi-dots { min-width: 20px; }
.menu-cat.two-way .mi-price { min-width: 74px; text-align: right; }
.menu-cat.two-way .mi-price.alt { color: var(--para); }

.menu-actions { margin-top: 58px; text-align: center; }
.menu-page { padding-top: 30px; }

.promo-notice {
  display: block;
  margin: 0 auto 40px;
  max-width: 640px;
  padding: 16px 22px;
  border: 1px solid var(--emerald);
  background: rgba(31, 93, 72, 0.08);
  text-align: center;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--emerald);
}

.promo-notice.hidden { display: none; }
.menu-page .promo-notice { margin-top: 10px; }

/* =========================================================================
   Afterwork
   ========================================================================= */
.afterwork { background: var(--panel); border-block: 1px solid var(--line); }
.afterwork-inner { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 64px; align-items: center; }
.afterwork-copy .section-title { margin: 16px 0 18px; }
.afterwork-copy p { color: var(--para); margin-bottom: 26px; }
.afterwork-copy .btn { margin-top: 6px; }

.afterwork-time {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  border: 1px solid var(--brass-dim);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 24px;
}

.afterwork-list { padding: 34px 38px; background: var(--bg-2); border: 1px solid var(--line); }
.aw-row { display: flex; align-items: baseline; gap: 10px; padding: 11px 0; }
.aw-row + .aw-row { border-top: 1px solid var(--line-soft); }
.aw-name { font-family: var(--serif); font-size: 1.02rem; }
.aw-dots { flex: 1; border-bottom: 1px dotted rgba(168, 130, 60, 0.4); transform: translateY(-4px); }
.aw-price { font-family: var(--serif); font-style: italic; font-weight: 500; color: var(--brass-text); white-space: nowrap; }

/* =========================================================================
   Spaces
   ========================================================================= */
.spaces-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

.space-card {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background: var(--oak);
  box-shadow: 0 20px 44px -30px rgba(34, 31, 28, 0.55);
}

.space-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease), filter 0.6s var(--ease); filter: saturate(0.86); }
.space-card:hover img { transform: scale(1.07); filter: saturate(1); }

.space-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 38%, rgba(12, 11, 13, 0.86));
  pointer-events: none;
}

.space-card figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 22px 20px;
  font-family: var(--display);
  font-size: 1.16rem;
  font-weight: 400;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #FFF;
  word-spacing: var(--display-ws);
}

.space-card figcaption small {
  display: block;
  margin-top: 5px;
  font-family: var(--ui);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: none;
  color: var(--brass-lift);
}

.space-card figcaption small:empty { display: none; }

/* =========================================================================
   Gallery
   ========================================================================= */
.gallery-section { overflow: hidden; }
.gal-rows { display: grid; gap: 20px; }
.gal-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
.gal-track { display: flex; gap: 20px; width: max-content; animation: slide 52s linear infinite; }
.gal-marquee.reverse .gal-track { animation-direction: reverse; }
.gal-marquee:hover .gal-track { animation-play-state: paused; }

.gal-track img {
  width: 280px;
  height: 280px;
  object-fit: cover;
  cursor: pointer;
  filter: saturate(0.85);
  transition: filter 0.5s var(--ease), transform 0.5s var(--ease);
  box-shadow: 0 16px 34px -26px rgba(34, 31, 28, 0.6);
}

.gal-track img:hover { filter: none; transform: scale(1.03); }
@keyframes slide { to { transform: translateX(-50%); } }

.gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }

/* The lightbox is the one place the site goes dark on purpose: a photograph
   shows better against black, and it is a moment rather than a page. */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  place-items: center;
  background: rgba(12, 11, 13, 0.94);
  backdrop-filter: blur(6px);
  padding: 40px;
}

.lightbox.open { display: grid; }
.lightbox img { max-width: min(92vw, 900px); max-height: 86svh; object-fit: contain; }

.lightbox button {
  position: absolute;
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(200, 162, 92, 0.5);
  border-radius: 50%;
  color: #FBF8F2;
  font-size: 1.2rem;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease);
}

.lightbox button:hover { background: var(--emerald); border-color: var(--emerald); }
.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 and map
   ========================================================================= */
.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.info-grid.no-map { grid-template-columns: 1fr; max-width: 620px; }

.hours-list { list-style: none; }
.hours-list li { display: flex; align-items: baseline; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line-soft); }
.hours-list .day-col { display: flex; flex-direction: column; flex: none; }
.hours-list .day { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }
.hours-list .day-note { margin-top: 3px; font-family: var(--serif); font-style: italic; font-size: 0.86rem; color: var(--brass-text); }
.hours-list .dots { flex: 1; border-bottom: 1px dotted rgba(168, 130, 60, 0.35); transform: translateY(-4px); }
.hours-list .time { font-family: var(--serif); color: var(--ink); white-space: nowrap; }
.hours-list .closed { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--err); }

#map { height: 420px; border: 1px solid var(--line); background: var(--oak); }
/* Warm the tiles toward the plaster rather than inverting them, which is what
   turns a light map muddy. */
.leaflet-tile-pane { filter: saturate(0.55) sepia(0.16) brightness(1.03) contrast(0.94); }
.leaflet-control-zoom a { background: var(--panel) !important; color: var(--ink) !important; border-color: var(--line) !important; }
.leaflet-control-attribution { background: rgba(251, 248, 242, 0.82) !important; color: var(--para) !important; }
.leaflet-control-attribution a { color: var(--emerald) !important; }
.leaflet-popup-content-wrapper { background: var(--panel); color: var(--ink); border-radius: 0; border: 1px solid var(--line); font-family: var(--ui); }
.leaflet-popup-tip { background: var(--panel); }
.leaflet-popup-content a { color: var(--emerald); }

.map-pin { position: relative; width: 22px; height: 22px; }
.map-pin::before { content: ''; position: absolute; inset: 6px; border-radius: 50%; background: var(--emerald); }
.map-pin::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--emerald); animation: ping 2.4s ease-out infinite; }
@keyframes ping { to { transform: scale(2.1); opacity: 0; } }

/* =========================================================================
   Reservation
   ========================================================================= */
.reserve-section { background: var(--bg-2); border-block: 1px solid var(--line); }

.reserve-panel {
  max-width: 780px;
  margin: 0 auto;
  padding: 52px 54px;
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: 0 30px 70px -50px rgba(34, 31, 28, 0.6);
  position: relative;
}

/* A seal that follows you down the page: their disc again, with the invitation
   set around it. Hidden over the hero, where the two buttons already say it,
   and hidden on a phone, where it would sit on top of the content. */
.reserve-badge {
  position: fixed;
  right: 26px;
  bottom: 26px;
  z-index: 90;
  width: 92px;
  height: 92px;
  opacity: 0;
  transform: scale(0.8);
  pointer-events: none;
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}

body.scrolled-past-hero .reserve-badge { opacity: 1; transform: none; pointer-events: auto; }
.reserve-badge svg { width: 100%; height: 100%; animation: turn 40s linear infinite; }
.reserve-badge svg text { font-family: var(--ui); font-size: 8.4px; font-weight: 600; letter-spacing: 3.2px; text-transform: uppercase; fill: var(--brass); }

.reserve-badge .badge-center {
  position: absolute;
  inset: 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  transition: transform 0.5s var(--ease);
}

.reserve-badge .badge-center img { width: 52px; border-radius: 50%; box-shadow: 0 8px 20px -10px rgba(34, 31, 28, 0.7); }
.reserve-badge:hover .badge-center { transform: scale(1.08); }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-field { display: flex; flex-direction: column; gap: 8px; }
.form-field.full { grid-column: 1 / -1; }

.form-field label, .auth-form label {
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--para);
}

.form-field input, .form-field select, .auth-form input, .auth-form select {
  width: 100%;
  padding: 13px 15px;
  background: var(--bg);
  border: 1px solid var(--line-soft);
  color: var(--ink);
  font-family: var(--ui);
  font-size: 0.96rem;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}

.form-field input::placeholder { color: rgba(110, 102, 92, 0.55); }

.form-field input:focus, .form-field select:focus,
.auth-form input:focus, .auth-form select:focus {
  outline: none;
  border-color: var(--emerald);
  background: #FFF;
}

.form-field input[type='date'], .form-field input[type='time'] { color-scheme: light; }
.auth-form select option { background: var(--panel); }

.phone-row { display: grid; grid-template-columns: 116px 1fr; gap: 10px; }
.form-note { margin-top: 18px; font-size: 0.84rem; color: var(--para); text-align: center; }
.form-submit { grid-column: 1 / -1; margin-top: 8px; }
.form-submit .btn { width: 100%; }

.form-msg { margin-top: 14px; text-align: center; font-size: 0.88rem; min-height: 22px; }
.form-msg.ok { color: var(--ok); }
.form-msg.err { color: var(--err); }

.prefill-note {
  margin-bottom: 22px;
  padding: 11px 16px;
  border-left: 3px solid var(--emerald);
  background: rgba(31, 93, 72, 0.07);
  font-size: 0.88rem;
  color: var(--ink-2);
}

.field-note { font-size: 0.78rem; color: var(--para); }

/* Time picker: only the slots the house actually takes */
.timepick { position: relative; }

.timepick-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 15px;
  background: var(--bg);
  border: 1px solid var(--line-soft);
  color: var(--para);
  font-size: 0.96rem;
  text-align: left;
  transition: border-color 0.3s var(--ease);
}

.timepick-btn svg { width: 15px; height: 15px; flex: none; fill: var(--brass); }
.timepick-btn .tp-caret { margin-left: auto; transition: transform 0.3s var(--ease); color: var(--para); }
.timepick-btn:hover { border-color: var(--brass-dim); }
.timepick-btn.chosen { color: var(--ink); }
.timepick-btn.open { border-color: var(--emerald); }
.timepick-btn.open .tp-caret { transform: rotate(180deg); }

.timepick-panel {
  position: absolute;
  z-index: 40;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: 232px;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: 8px;
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: 0 22px 50px -26px rgba(34, 31, 28, 0.5);
}

.timepick-panel[hidden] { display: none; }
.timepick-panel::-webkit-scrollbar { width: 5px; }
.timepick-panel::-webkit-scrollbar-thumb { background: var(--brass-dim); }

.timepick-slot { padding: 9px 4px; text-align: center; font-size: 0.88rem; color: var(--para); border: 1px solid transparent; transition: background 0.2s, color 0.2s, border-color 0.2s; }
.timepick-slot:hover { background: var(--oak); color: var(--ink); }
.timepick-slot.on { background: var(--emerald); color: #FFF; border-color: var(--emerald); }

/* =========================================================================
   Contact
   ========================================================================= */
.contact-band {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--panel);
  border-block: 1px solid var(--line);
}

/* The bar, behind the invitation to come and see it. Same 1px as everywhere
   else: the blur is a softening, not a disguise. */
.contact-band::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url('/images/contact-bg.jpg?v=1') center / cover no-repeat;
  transform: scale(1.02);
  filter: blur(1px);
}

.contact-band::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg,
      rgba(251, 248, 242, 0.93) 0,
      rgba(251, 248, 242, 0.84) 90px,
      rgba(251, 248, 242, 0.86) 300px,
      rgba(251, 248, 242, 0.94) 460px,
      rgba(251, 248, 242, 0.95) 100%);
}

.contact-band > .container { position: relative; z-index: 2; }
.contact-inner { text-align: center; max-width: 780px; margin: 0 auto; }
.contact-inner .section-title { margin: 16px 0 18px; }
.contact-lead { color: var(--para); margin-bottom: 34px; }

.contact-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 38px; }

.contact-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border: 1px solid var(--line-soft);
  background: var(--bg);
  text-align: left;
  transition: border-color 0.35s var(--ease), transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

a.contact-card:hover { border-color: var(--emerald); transform: translateY(-3px); box-shadow: 0 16px 30px -22px rgba(34, 31, 28, 0.5); }

.cc-icon { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--brass-dim); border-radius: 50%; }
.cc-icon svg { width: 15px; height: 15px; fill: var(--brass); }
.cc-body { display: flex; flex-direction: column; min-width: 0; }
.cc-body small { font-size: 0.6rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--para); }
.cc-body b { font-weight: 500; font-size: 0.94rem; overflow-wrap: anywhere; }

.contact-lines { display: grid; gap: 12px; margin-top: 26px; margin-bottom: 30px; color: var(--para); }
.contact-lines > div { display: flex; align-items: center; gap: 12px; }
.contact-lines strong { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid var(--brass-dim); border-radius: 50%; }
.contact-lines strong svg { width: 11px; height: 11px; fill: var(--brass); }
.contact-lines a:hover { color: var(--ink); }

.contact-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.contact-actions .btn { min-width: 180px; }
.contact-band .socials { justify-content: center; margin-top: 34px; }

.socials { display: flex; gap: 14px; }

.socials a {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-soft);
  border-radius: 50%;
  background: var(--panel);
  transition: border-color 0.35s var(--ease), transform 0.35s var(--ease);
}

.socials a img { width: 22px; height: 22px; }
.socials a:hover { border-color: var(--brass-dim); transform: translateY(-3px); }

/* =========================================================================
   Footer
   ========================================================================= */
/* Not a scene: the fluted front of the client's own bar, cropped out of their
   photograph. Four columns of small links sit on this, and vertical ribbing
   stays quiet under type in a way a room never does. */
footer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 74px 0 30px;
  border-top: 1px solid var(--line);
  background: var(--bg-2);
}

footer::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url('/images/footer-bg.jpg?v=1') center / cover no-repeat;
  transform: scale(1.02);
  filter: blur(1px);
}

footer::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg,
    rgba(237, 230, 217, 0.9) 0,
    rgba(237, 230, 217, 0.94) 40%,
    rgba(237, 230, 217, 0.96) 100%);
}

footer > .container { position: relative; z-index: 1; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 44px; }
.footer-logo { height: 26px; width: auto; margin-bottom: 20px; }
.footer-grid p { color: var(--para); font-size: 0.92rem; max-width: 34ch; }

.footer-grid h4 { font-size: 0.64rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--brass-text); margin-bottom: 16px; }
.footer-grid ul { list-style: none; display: grid; gap: 10px; }
.footer-grid li { font-size: 0.9rem; color: var(--para); }
.footer-grid a { color: var(--para); transition: color 0.3s var(--ease); }
.footer-grid a:hover { color: var(--ink); }

.footer-bottom {
  margin-top: 54px;
  padding-top: 22px;
  border-top: 1px solid var(--line-soft);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 0.78rem;
  color: var(--para);
}

.footer-bottom a:hover { color: var(--brass-text); }

/* =========================================================================
   Account, sign-in, deals
   ========================================================================= */
.page-boot { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; background: var(--bg); transition: opacity 0.4s ease; }
.page-boot.gone { opacity: 0; pointer-events: none; }

.boot-mark { position: relative; display: grid; place-items: center; width: 96px; height: 96px; }
.boot-mark img { width: 54px; }
.boot-ring { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(168, 130, 60, 0.2); border-top-color: var(--brass); animation: turn 1.1s linear infinite; }

.page-account { position: relative; min-height: 100svh; display: flex; flex-direction: column; }
.page-account::before { content: ''; position: fixed; inset: 0; z-index: -1; background: url('/images/account-bg.jpg') center / cover no-repeat; opacity: 0.10; }
.page-account::after { content: ''; position: fixed; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(243, 238, 228, 0.9), var(--bg)); }
.page-account .nav { position: sticky; background: rgba(243, 238, 228, 0.94); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.page-account .nav-logo img { height: 26px; }
.page-account footer { margin-top: auto; background: transparent; }

.nav-simple .nav-links { margin-left: auto; }
.nav-simple .nav-links li { list-style: none; }
.nav-simple .nav-links a { font-size: 0.7rem; }

.auth-wrap { flex: 1; display: grid; place-items: center; padding: 60px 22px 90px; }

.auth-card {
  width: min(520px, 100%);
  padding: 46px 44px;
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: 0 30px 70px -50px rgba(34, 31, 28, 0.55);
}

.auth-card .section-title { font-size: 1.8rem; text-align: center; }
.auth-logo { display: block; height: 26px; width: auto; margin: 0 auto 22px; }
.auth-sub { text-align: center; color: var(--para); font-size: 0.92rem; margin-top: 12px; margin-bottom: 30px; }
.auth-form { display: grid; gap: 18px; }
.auth-form .btn { width: 100%; margin-top: 6px; }
.auth-form .btn.ghost { margin-top: 0; }
.auth-form label { display: grid; gap: 8px; }
.auth-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.auth-hint { font-size: 0.78rem; color: var(--para); }
.auth-switch { text-align: center; margin-top: 22px; font-size: 0.9rem; color: var(--para); }
.auth-switch a { color: var(--emerald); font-weight: 500; }
.auth-switch a:hover { color: var(--ink); }
.auth-msg { text-align: center; font-size: 0.88rem; min-height: 20px; }
.auth-msg.ok { color: var(--ok); }
.auth-msg.err { color: var(--err); }

#signupForm { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
#signupForm .full { grid-column: 1 / -1; }

.gender-row { display: flex; gap: 8px; }
.gender-row button { flex: 1; padding: 11px; border: 1px solid var(--line-soft); font-size: 0.74rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--para); transition: all 0.25s; }
.gender-row button:hover { border-color: var(--brass-dim); color: var(--ink); }
.gender-row button.active { background: var(--emerald); border-color: var(--emerald); color: #FFF; }

.birthday-note { font-size: 0.78rem; color: var(--para); }

.stay-line { margin-top: 4px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* Beats the generic .auth-form label rule, which lays labels out as a stacked
   grid and would put the tick above its own wording. */
.auth-form .stay-line label.stay-row,
.auth-form label.stay-row {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.84rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--para);
  margin: 0;
}

.stay-row input { width: auto; accent-color: var(--emerald); }
.stay-line .forgot-link { margin-top: 0; }

.forgot-link { display: inline-block; margin-top: 4px; font-size: 0.82rem; color: var(--para); }
.forgot-link:hover { color: var(--emerald); }

.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 46px; }
.pw-eye { position: absolute; right: 10px; bottom: 9px; width: 30px; height: 30px; display: grid; place-items: center; opacity: 0.5; }
.pw-eye:hover { opacity: 1; }
.pw-eye svg { width: 17px; height: 17px; fill: var(--para); }
.pw-eye .eye-shut { display: none; }
.pw-eye.on .eye-open { display: none; }
.pw-eye.on .eye-shut { display: block; }

.pending-title { text-align: center; }

.account-main { flex: 1; padding: 40px 0 90px; }
.account-main > .container { display: grid; gap: 34px; }
.account-main section { padding: 0; }

.member-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 24px; }
.member-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }

.member-card { padding: 26px 28px; background: var(--panel); border: 1px solid var(--line); }
.member-card h3 { font-family: var(--display); font-size: 1.2rem; font-weight: 400; text-transform: uppercase; word-spacing: var(--display-ws); margin-bottom: 12px; }
.member-card .muted { color: var(--para); font-size: 0.9rem; }
.member-card .btn { margin-top: 18px; }

.fidelity-card { padding: 26px 28px; background: rgba(31, 93, 72, 0.07); border: 1px solid var(--emerald); }
.fidelity-card .kicker { margin-bottom: 10px; }
.fidelity-card b { font-family: var(--serif); font-size: 2rem; color: var(--brass-text); display: block; }
.fidelity-card p { color: var(--para); font-size: 0.9rem; }
.fidelity-card.off b { color: var(--para); }

.res-list { display: grid; gap: 14px; }
.res-card { display: flex; align-items: center; gap: 22px; padding: 20px 24px; background: var(--panel); border: 1px solid var(--line-soft); flex-wrap: wrap; }
.res-when { display: flex; flex-direction: column; flex: none; min-width: 108px; }
.res-when b { font-family: var(--serif); font-size: 1.25rem; color: var(--brass-text); }
.res-when span { font-size: 0.74rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--para); }
.res-meta { display: flex; gap: 20px; flex-wrap: wrap; flex: 1; }
.res-meta span { font-size: 0.76rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--para); }
.res-meta b { display: block; font-weight: 500; font-size: 0.96rem; color: var(--ink); }

.res-badge { padding: 6px 14px; font-size: 0.62rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; border: 1px solid; }
.res-badge.pending { color: var(--brass-text); border-color: var(--brass-dim); }
.res-badge.confirmed { color: var(--emerald); border-color: rgba(31, 93, 72, 0.45); }
.res-badge.cancelled { color: var(--err); border-color: rgba(168, 52, 28, 0.4); }

.deals-main { padding: 30px 0 90px; }
.deals-main .section-head { margin-bottom: 34px; }
.deal-group { margin-bottom: 46px; }
.deal-group h2 { font-family: var(--display); font-size: 1.42rem; font-weight: 400; text-transform: uppercase; word-spacing: var(--display-ws); color: var(--ink); margin-bottom: 20px; }
.deal-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; }

.deal-card { position: relative; background: var(--panel); border: 1px solid var(--line-soft); transition: border-color 0.35s var(--ease), transform 0.35s var(--ease); }
.deal-card:hover { border-color: var(--emerald); transform: translateY(-3px); }
.deal-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.deal-body { padding: 20px 22px; }
.deal-body h3 { font-family: var(--serif); font-size: 1.08rem; font-weight: 500; margin-bottom: 8px; }
.deal-body p { font-size: 0.88rem; color: var(--para); }
.deal-prices { display: flex; align-items: baseline; gap: 12px; margin-top: 14px; }
.deal-prices s { color: var(--para); opacity: 0.65; font-family: var(--serif); }
.deal-prices b { font-family: var(--serif); font-size: 1.35rem; color: var(--emerald); font-weight: 500; }
.deal-badge { position: absolute; top: 12px; right: 12px; padding: 5px 11px; background: var(--emerald); color: #FFF; font-size: 0.62rem; font-weight: 600; letter-spacing: 0.12em; }

.deals-empty { text-align: center; padding: 70px 0; color: var(--para); }
.deals-empty .contact-actions { margin-top: 26px; }

/* --- Delete account ------------------------------------------------------ */
.del-card { width: min(620px, 100%); padding: 46px 44px; background: var(--panel); border: 1px solid var(--line); }
.del-card .section-title { font-size: 1.7rem; text-align: center; }
.del-card .auth-sub { margin-bottom: 24px; }
.del-card .btn { width: 100%; }
.del-block { margin-bottom: 28px; }
.del-block h2 { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--brass); margin-bottom: 12px; }
.del-list { list-style: none; display: grid; gap: 10px; }
.del-list li { position: relative; padding-left: 20px; font-size: 0.9rem; color: var(--para); }
.del-list li::before { content: ''; position: absolute; left: 0; top: 10px; width: 6px; height: 6px; border-radius: 50%; border: 1.5px solid var(--brass-dim); }
.del-note { font-size: 0.84rem; color: var(--para); margin-top: 14px; }
.del-or { text-align: center; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--para); margin: 22px 0; }
.del-app { font-size: 0.9rem; color: var(--para); }

/* --- Legal --------------------------------------------------------------- */
.legal { max-width: 760px; margin: 0 auto; padding: 40px 0 90px; }
.legal h1 { font-family: var(--display); font-size: clamp(1.9rem, 5vw, 2.8rem); font-weight: 400; text-transform: uppercase; word-spacing: var(--display-ws); margin-bottom: 26px; }
.legal h2 { font-family: var(--display); font-size: 1.24rem; font-weight: 400; text-transform: uppercase; word-spacing: var(--display-ws); color: var(--ink); margin: 34px 0 12px; }
.legal p { color: var(--para); margin-bottom: 14px; }
.legal ul { list-style: none; display: grid; gap: 8px; margin-bottom: 16px; }
.legal li { position: relative; padding-left: 18px; color: var(--para); }
.legal li::before { content: '—'; position: absolute; left: 0; color: var(--brass-dim); }

/* --- Toast --------------------------------------------------------------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 34px;
  transform: translate(-50%, 20px);
  z-index: 400;
  padding: 13px 26px;
  background: var(--ink);
  color: var(--bg);
  border: 1px solid var(--ink);
  font-size: 0.86rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s, transform 0.3s;
}

.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 1000px) {
  .spaces-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .afterwork-inner { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 860px) {
  section { padding: 78px 0; }
  .about-grid, .info-grid { grid-template-columns: 1fr; gap: 44px; }
  .about-images .img-accent { right: 0; bottom: -30px; width: 40%; }
  .form-grid { grid-template-columns: 1fr; }
  .reserve-panel { padding: 46px 26px; }
  #signupForm { grid-template-columns: 1fr; }
  .auth-row { grid-template-columns: 1fr; }

  .burger { display: flex; }
  .nav-links {
    position: fixed;
    inset: 0;
    flex-direction: column;
    justify-content: center;
    gap: 22px;
    background: rgba(243, 238, 228, 0.98);
    backdrop-filter: blur(16px);
    transform: translateY(-100%);
    transition: transform 0.5s var(--ease);
    margin: 0;
  }
  .nav-links.open { transform: none; }
  .nav-links li { opacity: 0; transform: translateY(14px); }
  .nav-links.open li { animation: rise 0.5s var(--ease) forwards; }
  .nav-links.open li:nth-child(1) { animation-delay: 0.08s; }
  .nav-links.open li:nth-child(2) { animation-delay: 0.13s; }
  .nav-links.open li:nth-child(3) { animation-delay: 0.18s; }
  .nav-links.open li:nth-child(4) { animation-delay: 0.23s; }
  .nav-links.open li:nth-child(5) { animation-delay: 0.28s; }
  .nav-links.open li:nth-child(6) { animation-delay: 0.33s; }
  .nav-links.open li:nth-child(7) { animation-delay: 0.38s; }
  .nav-links a { font-size: 0.95rem; letter-spacing: 0.16em; }
  .nav-links .mobile-only { display: block; }
  .nav-links .lang-switch { margin-top: 10px; }
  .nav-right { display: none; }
  .nav.menu-open, .nav.scrolled.menu-open { background: transparent; border-bottom-color: transparent; }

  .auth-card, .del-card { padding: 36px 24px; }
  .gal-track img { width: 210px; height: 210px; }
  .menu-cols { grid-template-columns: 1fr; gap: 44px; }
  .res-card { gap: 14px; }
  #map { height: 320px; }
  .hero-disc { width: min(66vmin, 300px); }
  /* Below this width one line would set at about 14px, which is not a
     headline. Let it wrap and take the size back. */
  .hero-script { white-space: normal; font-size: clamp(1.9rem, 7.4vw, 2.6rem); max-width: 15ch; }
}

@media (max-width: 560px) {
  .container { width: calc(100% - 32px); }
  .spaces-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 30px; }
  .hero-actions .btn, .contact-actions .btn { width: 100%; }
  .about-images .img-accent { display: none; }
  .contact-cards { grid-template-columns: 1fr; }
  .lightbox { padding: 16px; }
  .lb-prev { left: 10px; }
  .lb-next { right: 10px; }
  .lb-close { top: 12px; right: 12px; }
  .reserve-badge { display: none; }
}

/* Everything that moves, stops. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal, .reveal-left, .hero-content > * { opacity: 1; transform: none; }
}

/* -------------------------------------------------------------------------
   Classes that replaced inline style attributes. They exist so the page can
   send style-src without 'unsafe-inline', which is what stops injected markup
   from carrying its own styling.
   ------------------------------------------------------------------------- */
.notfound { min-height: 100svh; display: grid; place-items: center; text-align: center; }
.notfound-mark { height: 60px; margin: 0 auto 30px; }
.notfound-lead { margin: 0 auto 34px; }
.flush { margin-bottom: 0; }
.above { position: relative; z-index: 2; }
.legal-main { padding-top: 160px; }