/* Boqueria Fina design system.
   Everything is taken off the room and the brand: the crema of the circular
   logo badge, the chocolate of its lettering, the carmine of the staff aprons
   and the leather menu cover, and the olive-and-butter stripe of the banquette
   fabric, which runs through the site as its one repeating motif.
   Type is Fraunces for everything that announces, Karla for everything spoken
   plainly, and Ms Madi for the written word — the "Fina" of the logo. */

:root {
  --paper: #f6efe1;        /* the logo badge */
  --paper-2: #eee3cd;      /* a deeper crema for alternate bands */
  --choc: #33200f;         /* the logo lettering */
  --choc-2: #221204;       /* espresso, the darkest ground */
  --ink: #2c1a0d;          /* body text on paper */
  --para: #5c4632;         /* quieter text on paper */
  --cream-text: #f6efe1;   /* text on chocolate */
  --cream-para: #d8c9ae;   /* quieter text on chocolate */
  --accent: #c03d2b;       /* carmine: aprons, menu cover, chairs. Every action */
  --accent-deep: #992e1f;
  --olive: #5f7d47;        /* the banquette green */
  --butter: #e0b84a;       /* the banquette yellow */
  --line: rgba(51, 32, 15, 0.18);
  --line-dark: rgba(246, 239, 225, 0.2);
  --accent-soft: rgba(192, 61, 43, 0.09);
  --shadow: 4px 4px 0 rgba(44, 26, 13, 0.9);
  --sans: 'Karla', 'Segoe UI', sans-serif;
  --display: 'Fraunces', Georgia, serif;
  --script: 'Ms Madi', cursive;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* The banquette stripe, drawn rather than photographed. Olive, crema and
     butter in the rhythm of the fabric itself. */
  --stripe: repeating-linear-gradient(90deg,
    #5f7d47 0 18px, #f6efe1 18px 24px,
    #e0b84a 24px 40px, #f6efe1 40px 46px,
    #8a9b5c 46px 58px, #f6efe1 58px 64px);
  /* Faint paper tooth so the crema never reads as flat white */
  --grain: repeating-linear-gradient(93deg,
      rgba(51, 32, 15, 0.014) 0 3px, rgba(255, 255, 255, 0.012) 3px 7px);
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--grain), var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 16.5px;
  line-height: 1.7;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

::selection { background: var(--accent); color: var(--paper); }

/* ---------- The stripe ---------- */
/* One band of banquette fabric at the top of the page, one at the foot of every
   chocolate section. It is the site's signature and it is used sparingly. */
.stripe-band { height: 9px; background: var(--stripe); }

/* ---------- Typography ---------- */
h1, h2, h3 { font-family: var(--display); font-weight: 640; color: inherit; line-height: 1.06; }

/* A tiny swatch of the fabric before every kicker, like a stitched label */
.kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent);
  line-height: 1.4;
}
.kicker::before {
  content: '';
  width: 26px; height: 9px; flex: none;
  background: var(--stripe);
  border: 1px solid rgba(44, 26, 13, 0.35);
}

.section-title {
  font-size: clamp(38px, 5.2vw, 68px);
  margin: 12px 0 16px;
  letter-spacing: -0.015em;
  font-weight: 640;
}
/* The written word in each heading: carmine italic Fraunces, not a script face,
   so the titles read as set type with one word leaning in. */
.t-script {
  font-family: var(--display);
  font-style: italic;
  font-weight: 480;
  color: var(--accent);
  letter-spacing: 0;
}
.section-sub { color: var(--para); max-width: 560px; font-size: 16px; }

/* ---------- Layout ---------- */
.container { width: min(1180px, 90vw); margin: 0 auto; }
section { padding: clamp(80px, 9.5vw, 140px) 0; position: relative; }
.section-head { margin-bottom: clamp(34px, 5vw, 60px); }
.section-head.center { text-align: center; }
.section-head.center .section-sub { margin: 0 auto; }
.section-head.center .kicker { justify-content: center; }

/* Chocolate bands set their own palette */
.band-dark { background: var(--choc); color: var(--cream-text); }
.band-dark .section-sub { color: var(--cream-para); }

/* ---------- Buttons ---------- */
/* Printed-poster buttons: a hard rectangle, a real border, and an offset slab
   of shadow that the hover pushes against. Nothing is a pill here. */
.btn {
  display: inline-block;
  padding: 14px 32px;
  border: 2px solid var(--choc);
  border-radius: 2px;
  color: var(--ink);
  background: var(--paper);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 12px;
  font-weight: 700;
  box-shadow: var(--shadow);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease),
              background 0.25s, color 0.25s;
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 rgba(44, 26, 13, 0.9); }
.btn:active { transform: translate(1px, 1px); box-shadow: 2px 2px 0 rgba(44, 26, 13, 0.9); }
.btn.solid { background: var(--accent); border-color: var(--choc); color: var(--paper); }
.btn.ghost { background: transparent; }
.btn:disabled { opacity: 0.5; pointer-events: none; }
/* On chocolate, the slab is butter so it still reads */
.band-dark .btn, .hero .btn, .reserve-section .btn, .contact-band .btn {
  border-color: var(--paper);
  box-shadow: 4px 4px 0 rgba(224, 184, 74, 0.85);
}
.band-dark .btn:hover, .hero .btn:hover { box-shadow: 6px 6px 0 rgba(224, 184, 74, 0.85); }
.hero .btn.ghost, .band-dark .btn.ghost, .contact-band .btn.ghost { color: var(--cream-text); }

/* ---------- Nav ---------- */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  transition: background 0.4s, box-shadow 0.4s, padding 0.4s, color 0.4s;
  padding: 20px 0;
  color: #fff;
}
.nav.scrolled {
  background: var(--paper);
  color: var(--ink);
  padding: 10px 0;
  box-shadow: 0 2px 0 var(--choc);
}
.nav.menu-open, .nav.scrolled.menu-open { background: transparent; box-shadow: none; }
.nav .container { width: min(1560px, 94vw); }
.nav-inner { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px; }
.nav-logo { justify-self: start; grid-column: 1; grid-row: 1; display: flex; align-items: center; }
.nav-logo img {
  height: 60px; width: 60px; min-width: 60px; flex: none;
  border-radius: 50%;
  transition: height .3s var(--ease), width .3s var(--ease), min-width .3s var(--ease);
}
.nav.scrolled .nav-logo img { height: 48px; width: 48px; min-width: 48px; }
.nav-links { display: flex; gap: 20px; align-items: center; list-style: none; grid-column: 2; grid-row: 1; }
.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-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: inherit;
  opacity: 0.95;
  transition: opacity 0.3s, color 0.3s;
  position: relative;
  padding: 6px 0;
}
/* The underline grows from the middle, in the stripe */
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 3px;
  background: var(--stripe);
  transform: scaleX(0);
  transition: transform 0.35s var(--ease);
}
.nav-links a:hover { opacity: 1; }
.nav-links a:hover::after { transform: scaleX(1); }
.nav-links > li > a, .nav-right > li > a { white-space: nowrap; }
.nav-cta {
  border: 2px solid currentColor; border-radius: 2px;
  padding: 9px 18px !important;
  transition: background .25s, color .25s !important;
}
.nav-cta:hover { background: var(--accent); border-color: var(--accent); color: #fff !important; }

/* Two-state switch, square like the buttons, with a sliding ink knob */
.lang-switch {
  position: relative; display: flex; padding: 3px;
  border: 2px solid currentColor; border-radius: 2px;
}
.lang-switch::before {
  content: ''; position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px);
  background: var(--accent); border-radius: 1px;
  transition: transform 0.35s var(--ease);
}
.lang-switch.on-fr::before { transform: translateX(100%); }
.lang-switch button {
  position: relative; z-index: 1; background: transparent; border: 0; color: inherit;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; padding: 5px 12px;
  transition: color 0.3s;
}
.lang-switch button.active { color: #fff; }

.burger { display: none; background: none; border: 0; width: 30px; height: 22px; position: relative; z-index: 70; justify-self: end; grid-column: 3; grid-row: 1; color: inherit; }
.burger span { position: absolute; left: 0; width: 100%; height: 2px; background: currentColor; transition: 0.35s var(--ease); }
.burger span:nth-child(1) { top: 0; }
.burger span:nth-child(2) { top: 10px; }
.burger span:nth-child(3) { top: 20px; }
.burger.open span { background: #fff; }
.burger.open span:nth-child(1) { top: 10px; transform: rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { top: 10px; transform: rotate(-45deg); }

/* ---------- Hero ---------- */
.hero {
  height: 100svh;
  min-height: 640px;
  position: relative;
  display: grid;
  place-items: center;
  text-align: center;
  overflow: hidden;
  padding: 0;
  color: var(--cream-text);
}
.hero-bg { position: absolute; inset: 0; background: var(--choc-2); }
.hero-bg video, .hero-bg img { width: 100%; height: 100%; object-fit: cover; }
.hero-bg img.kb { animation: kenburns 24s var(--ease) infinite alternate; }
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.1); } }
.hero-bg::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(34, 18, 4, 0.6) 0%, rgba(34, 18, 4, 0.28) 45%, rgba(34, 18, 4, 0.78) 100%);
}
.hero-content { position: relative; z-index: 2; padding: 0 24px; }
/* The headline is set like the logo: Fraunces, big and stacked tight, with the
   one leaning word carrying the carmine. No script here — the badge has it. */
.hero-script {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(44px, 6.8vw, 96px);
  color: #fff;
  line-height: 1.05;
  letter-spacing: -0.02em;
  max-width: 12ch;
  margin: 0 auto;
  text-shadow: 0 4px 44px rgba(0, 0, 0, 0.45);
}
.hero-tag {
  margin-top: 24px;
  display: inline-flex; align-items: center; gap: 14px;
  color: rgba(255, 255, 255, 0.96);
  font-size: clamp(12px, 1.5vw, 15px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.45em;
  text-indent: 0.45em;
}
.hero-tag::before, .hero-tag::after {
  content: ''; width: 34px; height: 8px; background: var(--stripe);
  border: 1px solid rgba(0, 0, 0, 0.3);
}
.hero-actions { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; margin-top: 42px; }

.hero-content > * { opacity: 0; transform: translateY(26px); animation: heroIn 1.1s var(--ease) forwards; }
.hero-content > *:nth-child(2) { animation-delay: 0.18s; }
.hero-content > *:nth-child(3) { animation-delay: 0.36s; }
@keyframes heroIn { to { opacity: 1; transform: none; } }
@keyframes navItemIn { to { opacity: 1; transform: none; } }

/* Rotating reserve badge: the round logo made useful. A crema disc with the
   wording turning around the still centre, like the stamp on the glass door. */
.reserve-badge {
  position: fixed; right: 34px; bottom: 34px; z-index: 55;
  width: 112px; height: 112px; display: grid; place-items: center;
  background: var(--paper);
  border: 2px solid var(--choc);
  border-radius: 50%;
  box-shadow: 4px 4px 0 rgba(44, 26, 13, 0.35);
}
.reserve-badge svg { position: absolute; inset: 4px; animation: spin 16s linear infinite; }
.reserve-badge svg text { fill: var(--ink); font-family: var(--sans); font-weight: 700; font-size: 8.6px; letter-spacing: 0.26em; text-transform: uppercase; }
.reserve-badge .badge-center { display: grid; place-items: center; transition: transform 0.5s var(--ease); }
.reserve-badge .badge-center img { width: 48px; height: 48px; border-radius: 50%; }
.reserve-badge:hover .badge-center { transform: scale(1.12); }
@keyframes spin { to { transform: rotate(360deg); } }

/* Opening hours under the hero buttons: the single fact people look for */
.hero-hours {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin-top: 34px; font-size: 12.5px; font-weight: 700; letter-spacing: 0.32em; color: var(--butter);
}
.hero-hours i { display: block; width: 46px; height: 2px; background: currentColor; opacity: 0.6; }
@media (max-width: 700px) { .hero-hours { margin-top: 26px; letter-spacing: 0.2em; } }

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(34px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.visible { opacity: 1; transform: none; }
.reveal-left { opacity: 0; transform: translateX(-90px); transition: opacity 1.2s var(--ease), transform 1.2s 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; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .reveal-left { opacity: 1; transform: none; transition: none; }
  .gal-track, .reserve-badge svg, .kb { animation: none; }
  .hero video { display: none; }
}

/* ---------- About ---------- */
.about-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(40px, 6vw, 90px); align-items: center; }
.about-images { position: relative; padding-bottom: 90px; }
/* The main image is a print pinned to the wall: ink frame and slab shadow.
   The accent is a round plate over its corner — the circle of the logo. */
.about-images .img-main {
  width: 80%;
  border: 2px solid var(--choc);
  border-radius: 2px;
  box-shadow: 10px 10px 0 rgba(192, 61, 43, 0.85);
}
.about-images .img-accent {
  position: absolute; right: 0; bottom: 0; width: 46%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  border: 6px solid var(--paper);
  outline: 2px solid var(--choc);
  box-shadow: 0 24px 50px rgba(44, 26, 13, 0.35);
}
.about-images .img-accent img { height: 100%; object-fit: cover; }
.img-frame { overflow: hidden; }
.img-frame img { transition: transform 1.2s var(--ease); }
.img-frame:hover img { transform: scale(1.06); }
.about-text p { color: var(--para); margin: 22px 0; font-size: 16.5px; }
/* The one written word on the page: the signature, exactly as the logo writes it */
.about-sign { font-family: var(--script); font-size: 58px; color: var(--accent); margin-top: 6px; line-height: 1.15; }

/* ---------- Menu ---------- */
.menu-section { background: var(--choc); color: var(--cream-text); }
#menu.menu-section {
  background:
    linear-gradient(180deg, rgba(34, 18, 4, 0.82) 0%, rgba(34, 18, 4, 0.9) 40%, rgba(34, 18, 4, 0.96) 100%),
    url('../images/menu-bg.jpg') center / cover fixed;
}
.menu-tabs { display: flex; justify-content: center; gap: 12px; margin-bottom: 40px; }
.menu-tabs button {
  background: transparent; border: 2px solid var(--line-dark); color: var(--cream-para);
  border-radius: 2px;
  padding: 11px 32px; text-transform: uppercase; letter-spacing: 0.22em; font-weight: 700; font-size: 11px;
  transition: 0.3s;
}
.menu-tabs button.active {
  border-color: var(--paper); color: var(--choc); background: var(--paper);
  box-shadow: 3px 3px 0 rgba(224, 184, 74, 0.85);
}
.menu-cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 3vw, 46px) clamp(36px, 5vw, 80px); align-items: start; }
@media (min-width: 1500px) { .menu-page .menu-cols { grid-template-columns: repeat(3, 1fr); } }
/* Category names are the market signs: Fraunces italic, butter on chocolate */
.menu-cat h3 {
  font-family: var(--display);
  font-style: italic;
  font-weight: 560;
  font-size: 27px;
  color: var(--butter);
  margin-bottom: 14px;
  display: flex; align-items: center; gap: 16px;
  letter-spacing: 0;
}
.menu-cat h3::after { content: ''; flex: 1; height: 5px; background: var(--stripe); opacity: 0.55; }
.menu-cat-sub {
  color: var(--cream-para);
  font-size: 14px;
  font-style: italic;
  margin: -8px 0 10px;
}
.menu-item { display: flex; align-items: baseline; gap: 10px; padding: 6px 0; }
.menu-item .mi-name { font-family: var(--display); font-weight: 560; font-size: 16.5px; color: inherit; white-space: nowrap; }
.menu-item .mi-dots { flex: 1; border-bottom: 2px dotted rgba(216, 201, 174, 0.35); transform: translateY(-5px); }
.menu-item .mi-price { font-family: var(--sans); font-weight: 700; color: var(--butter); font-size: 14.5px; white-space: nowrap; }
.menu-item-desc { color: var(--cream-para); opacity: 0.85; font-size: 13.5px; margin: -3px 0 6px; max-width: 88%; }
.menu-actions { text-align: center; margin-top: 44px; }
.menu-page { padding-top: clamp(46px, 5vw, 74px); }
.menu-page .promo-notice { margin-bottom: 22px; }

/* Two price columns, right aligned so the figures line up down the list */
.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 4px; border-bottom: 1px solid var(--line-dark); margin-bottom: 4px; }
.menu-item.mi-head .mi-price {
  font-family: var(--sans); font-style: normal; font-weight: 700;
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--cream-para); opacity: 0.8;
}

/* ---------- The moments (Déjeuner / Afterwork / Dîner / Cocktails) ---------- */
.spaces-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
/* Menu-board cards: ink frame, slab shadow, and the stripe stitched along the
   top edge like the banquette seam. */
.space-card {
  position: relative; overflow: hidden; aspect-ratio: 3 / 4.1;
  border: 2px solid var(--choc);
  border-radius: 2px;
  box-shadow: var(--shadow);
  background: var(--choc-2);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.space-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 8px;
  background: var(--stripe); z-index: 3;
  border-bottom: 1px solid rgba(44, 26, 13, 0.4);
}
.space-card:hover { transform: translate(-3px, -3px); box-shadow: 7px 7px 0 rgba(44, 26, 13, 0.9); }
.space-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.space-card:hover img { transform: scale(1.07); }
.space-card::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 48%, rgba(34, 18, 4, 0.9));
}
.space-card figcaption {
  position: absolute; left: 0; right: 0; bottom: 20px; z-index: 2;
  text-align: center;
  font-size: 15px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cream-text);
}
.space-card figcaption small:empty { display: none; }
.space-card figcaption small {
  display: block;
  font-family: var(--display); font-style: italic; font-weight: 480;
  font-size: 16px; letter-spacing: 0.01em; text-transform: none;
  color: var(--butter); margin-top: 3px;
}

/* ---------- Formules band ---------- */
/* The lunch formules get their own band: crema, with the card drawn as the
   paper menu itself — ink border, stripe seam, carmine prices. */
.afterwork {
  background: var(--grain), var(--paper-2);
  border-block: 2px solid var(--choc);
}
.afterwork-inner {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 7vw, 100px); align-items: center;
}
.afterwork-copy .section-title { margin-bottom: 6px; }
.afterwork-copy p { color: var(--para); margin-bottom: 22px; max-width: 46ch; }
.afterwork-time {
  font-family: var(--display); font-style: italic; font-weight: 520; font-size: 22px;
  color: var(--accent); margin: 0 0 18px !important;
}
.afterwork-copy .btn { margin-top: 6px; }
.afterwork-list {
  position: relative;
  background: var(--paper);
  border: 2px solid var(--choc);
  border-radius: 2px;
  box-shadow: 8px 8px 0 rgba(192, 61, 43, 0.85);
  padding: clamp(30px, 3vw, 42px) clamp(24px, 3vw, 38px) clamp(26px, 3vw, 40px);
}
.afterwork-list::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 8px;
  background: var(--stripe);
  border-bottom: 1px solid rgba(44, 26, 13, 0.4);
}
.aw-row { display: flex; align-items: baseline; gap: 10px; padding: 8px 0; }
.aw-name { font-family: var(--display); font-weight: 560; font-size: 16.5px; color: var(--ink); }
.aw-dots { flex: 1; border-bottom: 2px dotted rgba(92, 70, 50, 0.35); transform: translateY(-4px); }
.aw-price { font-family: var(--sans); font-weight: 700; font-size: 14.5px; color: var(--accent); white-space: nowrap; }
@media (max-width: 900px) {
  .afterwork-inner { grid-template-columns: 1fr; }
}

/* ---------- Gallery: two half-bands sliding in opposite directions ---------- */
.gallery-section { background: var(--choc); color: var(--cream-text); }
.gal-rows {
  display: grid; gap: 16px;
  width: 100vw;
  margin-left: calc(50% - 50vw);
}
.gal-marquee {
  overflow: hidden;
  position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.gal-track { display: flex; width: max-content; animation: gal-slide 62s linear infinite; }
.gal-marquee.reverse .gal-track { animation-direction: reverse; animation-duration: 72s; }
.gal-marquee:hover .gal-track { animation-play-state: paused; }
.gal-track img {
  height: 290px; width: auto; display: block; flex-shrink: 0;
  margin-right: 16px; cursor: zoom-in;
  border: 2px solid rgba(246, 239, 225, 0.14);
  transition: filter 0.5s, border-color 0.5s;
}
.gal-track img:hover { filter: brightness(1.1); border-color: var(--butter); }
@keyframes gal-slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 700px) { .gal-track img { height: 170px; margin-right: 10px; } }

.lightbox {
  position: fixed; inset: 0; z-index: 90; background: rgba(24, 13, 4, 0.96);
  display: grid; place-items: center; opacity: 0; pointer-events: none; transition: opacity 0.35s;
}
.lightbox.open { opacity: 1; pointer-events: auto; }
.lightbox img { max-width: 90vw; max-height: 86vh; object-fit: contain; box-shadow: 0 40px 90px rgba(0, 0, 0, 0.5); }
.lightbox button {
  position: absolute; background: none; border: 2px solid var(--line-dark); color: var(--cream-text);
  width: 48px; height: 48px; font-size: 18px; transition: 0.3s; display: grid; place-items: center; border-radius: 2px;
}
.lightbox button:hover { border-color: var(--butter); color: var(--butter); }
.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: 620px; }
.hours-list { list-style: none; margin-top: 30px; }
.hours-list li { display: flex; align-items: baseline; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.hours-list .day-col { min-width: 150px; display: flex; flex-direction: column; gap: 2px; }
.hours-list .day { text-transform: uppercase; letter-spacing: 0.16em; font-size: 11.5px; font-weight: 700; color: var(--para); }
.hours-list .day-note { font-family: var(--display); font-style: italic; font-size: 14px; color: var(--accent); }
.hours-list .dots { flex: 1; border-bottom: 2px dotted rgba(92, 70, 50, 0.3); transform: translateY(-4px); }
.hours-list .time { color: var(--ink); font-weight: 700; }
.hours-list .closed { color: var(--accent); font-family: var(--display); font-style: italic; }
.contact-lines { margin-top: 28px; display: grid; gap: 10px; color: var(--para); font-size: 15px; }
.contact-lines a:hover { color: var(--accent); }
.contact-lines strong { color: var(--ink); font-weight: 700; }
#map {
  min-height: 420px; height: 100%;
  border: 2px solid var(--choc); border-radius: 2px;
  box-shadow: var(--shadow);
  z-index: 1;
}
.map-pin { position: relative; width: 22px; height: 22px; }
.map-pin::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: 50%;
  background: var(--accent);
  border: 3px solid #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}
.map-pin::after {
  content: '';
  position: absolute; inset: -12px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  animation: pin-pulse 2s 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: #fff; color: #333; }
.leaflet-popup-content a { color: #c03d2b; font-weight: 600; }

/* ---------- Reservation ---------- */
.reserve-section {
  background: linear-gradient(rgba(34, 18, 4, 0.85), rgba(34, 18, 4, 0.92)), url('../images/reserve-bg.jpg') center/cover fixed;
  color: var(--cream-text);
}
.reserve-panel {
  max-width: 760px; margin: 0 auto;
  background: var(--paper);
  color: var(--ink);
  border: 2px solid var(--choc);
  border-radius: 2px;
  box-shadow: 10px 10px 0 rgba(192, 61, 43, 0.85);
  padding: clamp(34px, 5vw, 60px);
  position: relative;
}
.reserve-panel::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 8px;
  background: var(--stripe);
  border-bottom: 1px solid rgba(44, 26, 13, 0.4);
}
.reserve-panel .section-sub { color: var(--para); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 34px; }
.form-field { display: grid; gap: 8px; }
.form-field.full { grid-column: 1 / -1; }
.form-field label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.26em; color: var(--para); }
.form-field input, .form-field select {
  background: #fffdf8;
  border: 2px solid var(--line);
  color: var(--ink);
  padding: 13px 15px;
  font-family: var(--sans);
  font-size: 15px;
  letter-spacing: 0.02em;
  transition: border-color 0.3s, box-shadow 0.3s;
  width: 100%;
  border-radius: 2px;
  appearance: none;
}
.form-field input:focus, .form-field select:focus { outline: none; border-color: var(--accent); box-shadow: 2px 2px 0 rgba(192, 61, 43, 0.5); }
.form-field input::placeholder { color: rgba(92, 70, 50, 0.45); }
.form-field select { background-image: linear-gradient(45deg, transparent 50%, var(--para) 50%), linear-gradient(135deg, var(--para) 50%, transparent 50%); background-position: calc(100% - 20px) 55%, calc(100% - 15px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }
.form-field input[type='date'], .form-field input[type='time'] { color-scheme: light; }
.phone-row { display: grid; grid-template-columns: 132px 1fr; gap: 10px; }
.form-note { color: var(--para); font-size: 13px; margin-top: 18px; text-align: center; }
.form-submit { margin-top: 30px; text-align: center; }
.reserve-panel .btn { box-shadow: var(--shadow); border-color: var(--choc); }
.form-msg { margin-top: 18px; text-align: center; font-size: 14px; font-weight: 700; display: none; }
.form-msg.ok { display: block; color: #4a7028; }
.form-msg.err { display: block; color: #a3341f; }

/* ---------- Footer ---------- */
footer { background: var(--choc-2); color: var(--cream-para); border-top: 0; padding: 0 0 34px; position: relative; }
footer::before { content: ''; display: block; height: 9px; background: var(--stripe); margin-bottom: 64px; }
.footer-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 44px; margin-bottom: 50px; }
.footer-grid h4 {
  font-family: var(--display); font-style: italic; font-weight: 520;
  font-size: 22px; margin-bottom: 16px; color: var(--butter);
}
.footer-grid p, .footer-grid a, .footer-grid li { color: var(--cream-para); font-size: 14px; list-style: none; }
.footer-grid a:hover { color: var(--cream-text); }
.footer-grid ul { display: grid; gap: 9px; }
.footer-logo { height: 64px; width: 64px; border-radius: 50%; margin-bottom: 16px; }
.socials { display: flex; gap: 14px; margin-top: 22px; }
.socials a {
  width: 42px; height: 42px;
  display: block; border-radius: 10px; overflow: hidden;
  transition: transform 0.3s var(--ease);
}
.socials a img { width: 100%; height: 100%; object-fit: contain; display: block; }
.socials a:hover { transform: translateY(-2px); }
.footer-bottom { border-top: 1px solid var(--line-dark); padding-top: 26px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; color: var(--cream-para); font-size: 12px; letter-spacing: 0.08em; }
.footer-bottom a:hover { color: var(--cream-text); }

/* ---------- Subpages ---------- */
.page-hero { height: 48vh; min-height: 360px; display: grid; place-items: center; text-align: center; position: relative; overflow: hidden; padding: 0; color: var(--cream-text); }
.page-hero .hero-bg img { animation: none; }
.page-hero .hero-bg::after {
  background: linear-gradient(180deg, rgba(34, 18, 4, 0.68) 0%, rgba(34, 18, 4, 0.46) 45%, rgba(34, 18, 4, 0.82) 100%);
}
.hero-video { display: block; }
.page-hero .hero-video { filter: blur(3px) saturate(1.04); 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(40px, 6vw, 72px); position: relative; z-index: 2; color: #fff; letter-spacing: -0.015em; }
.page-hero .kicker { position: relative; z-index: 2; color: var(--butter); }
.legal { max-width: 800px; margin: 0 auto; }
.legal h2 { font-size: 24px; margin: 44px 0 14px; color: var(--accent); font-weight: 600; }
.legal p, .legal li { color: var(--para); font-size: 15px; margin-bottom: 12px; }
.legal ul { padding-left: 20px; }

/* ---------- Toast ---------- */
.toast {
  position: fixed; bottom: 30px; left: 50%; transform: translate(-50%, 20px);
  background: var(--choc); border: 2px solid var(--butter); color: var(--cream-text);
  padding: 14px 28px; font-size: 13.5px; letter-spacing: 0.05em; z-index: 100; border-radius: 2px;
  opacity: 0; pointer-events: none; transition: 0.4s var(--ease);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .spaces-grid { grid-template-columns: repeat(2, 1fr); }
  .menu-cols { grid-template-columns: 1fr; }
  .reserve-badge { display: none; }
}
@media (max-width: 1260px) {
  .nav-inner { grid-template-columns: auto 1fr auto; }
  .nav-logo { grid-column: 1; justify-self: start; }
  .nav-logo img { height: 42px; width: 42px; min-width: 42px; }
  .nav-links {
    position: fixed; inset: 0;
    height: 100svh;
    background: var(--choc-2);
    color: var(--cream-text);
    flex-direction: column; justify-content: center; align-items: center; gap: 26px;
    clip-path: inset(0 0 0 100%);
    visibility: hidden;
    transition: clip-path 0.5s var(--ease), visibility 0s 0.5s;
    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.5s var(--ease);
  }
  .nav-links a { font-size: 17px; letter-spacing: 0.24em; text-indent: 0.24em; display: inline-block; color: var(--cream-text); }
  .nav-links .nav-cta { border: 2px solid var(--accent); padding: 14px 30px !important; }
  .nav-links li { width: 100%; text-align: center; opacity: 0; transform: translateY(16px); }
  .nav-links .lang-switch { display: inline-flex; color: var(--cream-text); }
  .nav-links.open li { animation: navItemIn 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.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-right { display: none; }
  .nav-links .mobile-only { display: block; }
  .burger { display: block; }
  .nav-simple .nav-links {
    position: static; height: auto; background: none; color: inherit;
    flex-direction: row; transform: none; gap: 18px; z-index: auto;
  }
  .nav-simple .nav-links li { opacity: 1; transform: none; }
  .nav-simple .nav-links a { font-size: 11px; color: inherit; }
}

@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 the bands readable */
  #menu.menu-section, .reserve-section { background-attachment: 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.26em; text-indent: 0.26em; }
  .hero-tag::before, .hero-tag::after { display: none; }
  .menu-item { flex-wrap: wrap; }
  .menu-item .mi-name { white-space: normal; max-width: 75%; }
  .menu-item .mi-dots { min-width: 20px; }
  .menu-cat.two-way .menu-item { flex-wrap: nowrap; align-items: baseline; }
  .menu-cat.two-way .mi-name { min-width: 0; max-width: none; flex: 1 1 auto; }
  .menu-cat.two-way .mi-dots { flex: 0 1 18px; min-width: 0; }
  .menu-cat.two-way .mi-price { flex: none; width: 3.6em; }
  .menu-cat.two-way .mi-price.alt { width: 4.4em; }
  .menu-cat.two-way .mi-head .mi-price { font-size: 8.5px; letter-spacing: 0.06em; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal, .reveal-left { opacity: 1; transform: none; }
}

/* ---------- Account (sign in, sign up, member area) ---------- */
.nav-auth {
  background: var(--accent); color: #fff !important; border: 2px solid var(--accent);
  border-radius: 2px; padding: 9px 18px !important; letter-spacing: 0.14em;
  transition: background .3s, color .3s;
}
.nav-auth:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
.nav-auth.signed-in { background: transparent; color: inherit !important; border-color: currentColor; }

.page-account { background: var(--choc-2); color: var(--cream-text); }
.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(34, 18, 4,.66), rgba(34, 18, 4,.8) 55%, rgba(34, 18, 4,.93));
}
.page-account .nav {
  background: var(--paper); color: var(--ink);
  box-shadow: 0 2px 0 var(--choc); padding: 10px 0;
}
.page-account .nav-logo img { height: 48px; width: 48px; min-width: 48px; }
.account-main { padding: 96px 0 36px; min-height: 100vh; box-sizing: border-box; display: flex; align-items: center; }
.account-main > .container { width: 100%; }
.page-account footer { background: rgba(24, 13, 4, 0.6); }
.page-account footer::before { margin-bottom: 34px; }

.account-main section { padding: 0; }
.auth-wrap { display: flex; justify-content: center; width: 100%; }
.auth-card {
  width: min(560px, 100%); background: var(--paper); color: var(--ink);
  border: 2px solid var(--choc);
  border-radius: 2px; padding: 32px 32px; text-align: center;
  box-shadow: 8px 8px 0 rgba(192, 61, 43, 0.85);
  position: relative;
}
.auth-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 7px;
  background: var(--stripe);
  border-bottom: 1px solid rgba(44, 26, 13, 0.4);
}
.auth-logo { width: 56px; height: 56px; border-radius: 50%; margin-bottom: 8px; margin-top: 6px; }
.auth-card .section-title { font-size: 25px; margin-bottom: 4px; }
.auth-sub { color: var(--para); font-size: 13px; line-height: 19px; margin-bottom: 12px; }
.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-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.15em;
  color: var(--para); margin-top: 6px;
}
.auth-form input {
  width: 100%; background: #fffdf8; border: 2px solid var(--line);
  border-radius: 2px; padding: 10px 13px; color: var(--ink);
  font-family: var(--sans); font-size: 14.5px;
}
.auth-form input:focus { outline: none; border-color: var(--accent); }
.auth-form .btn { margin-top: 14px; width: 100%; }
.auth-form .btn.ghost { margin-top: 8px; }
.auth-hint { font-size: 10.5px; color: var(--para); line-height: 16px; margin-top: 4px; }
.gender-row { display: flex; gap: 8px; }
.gender-row button {
  flex: 1; background: #fffdf8; border: 2px solid var(--line); border-radius: 2px;
  color: var(--para); padding: 8px 6px; font-size: 13px; font-family: var(--sans); transition: .25s;
}
.gender-row button:hover { border-color: var(--accent); }
.gender-row button.active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-deep); font-weight: 700; }
.auth-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.auth-msg { font-size: 13px; font-weight: 700; min-height: 18px; margin-top: 8px; text-align: center; grid-column: 1 / -1; }
.auth-msg.err { color: #a3341f; }
.auth-msg.ok { color: #4a7028; }
.auth-switch { font-size: 13px; color: var(--para); text-align: center; margin-top: 10px; grid-column: 1 / -1; }
.auth-switch a { color: var(--accent); text-decoration: underline; }
.pending-title { font-family: var(--display); font-size: 23px; font-weight: 600; margin-bottom: 8px; }

.member-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; margin: 26px 0 40px; }
.member-card { background: var(--paper); color: var(--ink); border: 2px solid var(--choc); border-radius: 2px; box-shadow: var(--shadow); padding: 26px; }
.member-card h3 { font-family: var(--display); font-size: 20px; font-weight: 600; margin-bottom: 6px; }
.member-card .btn { margin-top: 14px; width: 100%; }
.member-card .muted { color: var(--para); font-size: 14px; }

.fidelity-card { background: linear-gradient(140deg, #5f7d47, #46603a 60%, #33200f); border-color: var(--choc); color: var(--cream-text); }
.fidelity-card .kicker { display: block; margin-bottom: 6px; color: var(--butter); }
.fidelity-card b { font-family: var(--display); font-size: 54px; font-weight: 640; color: #fff; line-height: 1; }
.fidelity-card p { color: var(--cream-para); font-size: 13px; margin-top: 10px; line-height: 20px; }
.fidelity-card.off b { color: var(--cream-para); opacity: 0.6; }

.member-heading { font-family: var(--display); font-size: 22px; font-weight: 600; margin-bottom: 16px; color: var(--cream-text); }
.res-list { display: grid; gap: 12px; }
.res-card {
  display: flex; align-items: center; gap: 18px; background: var(--paper); color: var(--ink);
  border: 2px solid var(--choc); border-radius: 2px; padding: 16px 20px;
  box-shadow: 3px 3px 0 rgba(44, 26, 13, 0.55);
}
.res-when { display: grid; min-width: 88px; }
.res-when b { font-family: var(--display); font-size: 19px; color: var(--accent); }
.res-when span { font-size: 12px; color: var(--para); }
.res-meta { display: grid; flex: 1; }
.res-meta b { font-size: 14px; font-weight: 700; }
.res-meta span { font-size: 12px; color: var(--para); }
.res-badge { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 6px 12px; border-radius: 2px; border: 2px solid; }
.res-badge.pending { color: #9c6d12; border-color: #e0b84a; background: rgba(224, 184, 74, 0.14); }
.res-badge.confirmed { color: #3f6122; border-color: #5f7d47; background: rgba(95, 125, 71, 0.14); }
.res-badge.cancelled { color: #a3341f; border-color: #c03d2b; background: rgba(192, 61, 43, 0.1); }

.prefill-note { color: var(--accent); font-size: 13px; margin-top: 10px; }
.hidden { display: none !important; }

@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 18px; }
  #signupForm { grid-template-columns: 1fr; }
  .res-card { flex-wrap: wrap; gap: 10px; }
  .res-when { min-width: 70px; }
}

/* ---------- Contact band ---------- */
.contact-band {
  position: relative; padding: 96px 0; overflow: hidden;
  background: url('/images/contact-bg.jpg') center/cover no-repeat fixed;
  color: var(--cream-text);
}
.contact-band::before {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(34, 18, 4,.84), rgba(34, 18, 4,.6) 45%, rgba(34, 18, 4,.88)),
    radial-gradient(120% 80% at 50% 50%, rgba(0,0,0,0) 35%, rgba(24,13,4,.45) 100%);
}
.contact-band > .container { position: relative; }
.contact-inner { text-align: center; max-width: 1060px; margin: 0 auto; }
.contact-inner .section-title { font-size: clamp(38px, 5vw, 58px); margin-bottom: 14px; color: #fff; }
.contact-lead { color: var(--cream-para); max-width: 620px; margin: 0 auto 40px; line-height: 26px; }

.contact-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 14px; margin-bottom: 36px; }
.contact-card {
  display: flex; align-items: center; gap: 14px; text-align: left; text-decoration: none;
  background: var(--paper); color: var(--ink);
  border: 2px solid var(--choc); border-radius: 2px;
  padding: 16px 18px;
  box-shadow: 4px 4px 0 rgba(224, 184, 74, 0.85);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
a.contact-card:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 rgba(224, 184, 74, 0.85); }
.cc-icon {
  width: 42px; height: 42px; flex: none; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent); border: 2px solid var(--choc);
}
.cc-icon svg { width: 16px; height: 16px; fill: var(--paper); }
.cc-body { display: grid; gap: 3px; min-width: 0; }
.cc-body small { font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--para); }
.cc-body b { font-weight: 700; font-size: 14px; color: var(--ink); overflow-wrap: anywhere; }

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

@media (max-width: 720px) {
  .contact-band { padding: 70px 0; background-attachment: scroll; }
  .contact-cards { grid-template-columns: minmax(0, 1fr); }
  .contact-actions .btn { width: 100%; }
}

@media (max-height: 900px) {
  .account-main { align-items: flex-start; padding-top: 88px; }
}

/* ---------- Auth card details ---------- */
.auth-logo { display: block; margin-left: auto; margin-right: auto; }

.auth-form select {
  width: 100%; background: #fffdf8; border: 2px solid var(--line);
  border-radius: 2px; padding: 10px 13px; color: var(--ink);
  font-family: var(--sans); font-size: 14.5px; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--accent) 50%),
                    linear-gradient(135deg, var(--accent) 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(--accent); }
.auth-form select option { background: #fffdf8; color: var(--ink); }

.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 46px; }
.pw-eye {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  background: none; border: 0; cursor: pointer; line-height: 0;
  padding: 9px 11px; color: var(--para); opacity: .8; transition: color .2s, opacity .2s;
}
.pw-eye svg { width: 21px; height: 21px; fill: currentColor; display: block; }
.pw-eye .eye-shut { display: none; }
.pw-eye.on { color: var(--accent); opacity: 1; }
.pw-eye.on .eye-open { display: none; }
.pw-eye.on .eye-shut { display: block; }
.pw-eye:hover { color: var(--ink); opacity: 1; }

.auth-form label.stay-row {
  display: flex; align-items: center; gap: 9px; margin-top: 12px;
  font-size: 13px; font-weight: 400; text-transform: none; letter-spacing: 0.01em;
  color: var(--para); cursor: pointer;
}
.stay-row input { width: 16px; height: 16px; accent-color: var(--accent); 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(--accent);
  text-decoration: underline; white-space: nowrap;
}
.forgot-link:hover { color: var(--accent-deep); }
.birthday-note {
  font-size: 12px; color: var(--accent-deep); margin-top: 10px; text-align: center;
  background: var(--accent-soft); border: 1px solid var(--line); border-radius: 2px; padding: 9px 12px;
}

/* ---------- Members' deal prices ---------- */
.mi-was { color: var(--cream-para); opacity: 0.6; margin-right: 10px; font-size: 0.92em; }
.mi-deal { color: #9fce6f; font-weight: 700; }
.nav-deals { color: #6f9b46 !important; }
.nav.scrolled .nav-deals { color: #4a7028 !important; }

/* ---------- Deals page ---------- */
.deals-main { align-items: flex-start; padding-top: 118px; }
.deals-main .section-head { margin-bottom: 30px; }
.deals-main .section-head .section-title, .deals-main .section-head .section-sub { color: var(--cream-text); }
.deals-empty {
  background: var(--paper); color: var(--para); border: 2px solid var(--choc); border-radius: 2px;
  box-shadow: var(--shadow);
  padding: 40px 30px; text-align: center; max-width: 560px; margin: 0 auto;
}
.deals-empty .contact-actions { margin-top: 22px; margin-bottom: 0; }
.deal-group { margin-bottom: 40px; }
.deal-group h2 { font-family: var(--display); font-size: 26px; font-weight: 600; margin-bottom: 16px; color: var(--cream-text); }
.deal-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.deal-card {
  position: relative; display: flex; gap: 14px; align-items: center;
  background: var(--paper); color: var(--ink);
  border: 2px solid var(--olive); border-radius: 2px;
  box-shadow: 4px 4px 0 rgba(95, 125, 71, 0.6);
  padding: 14px;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.deal-card:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 rgba(95, 125, 71, 0.6); }
.deal-card img { width: 74px; height: 74px; border-radius: 2px; object-fit: cover; flex: none; border: 1px solid var(--line); }
.deal-body { min-width: 0; flex: 1; }
.deal-body h3 { font-size: 17px; font-weight: 600; margin-bottom: 2px; font-family: var(--display); }
.deal-body p { color: var(--para); font-size: 12px; margin-bottom: 6px;
  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: .6; font-size: 13px; }
.deal-prices b { color: #3f6122; font-size: 17px; font-weight: 700; }
.deal-badge {
  position: absolute; top: 12px; right: 12px; background: rgba(95, 125, 71, .16);
  color: #3f6122; border-radius: 2px; padding: 4px 10px; font-size: 11px; font-weight: 700; letter-spacing: .06em;
}

/* ---------- Delete account ---------- */
.del-card { max-width: 640px; text-align: left; }
.del-card .section-title { text-align: center; }
.del-card .auth-sub { text-align: center; margin-bottom: 26px; }
.del-block { margin-bottom: 26px; }
.del-block h2 {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--accent-deep); margin-bottom: 10px; font-family: var(--sans); font-weight: 700;
}
.del-list { list-style: none; display: grid; gap: 8px; }
.del-list li { position: relative; padding-left: 18px; font-size: 14px; line-height: 1.55; color: var(--para); }
.del-list li::before { content: ''; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.del-note { font-size: 13px; color: var(--para); margin-top: 12px; line-height: 1.6; }
.del-or { margin-top: 20px; }
.del-app { border-top: 1px solid var(--line); padding-top: 16px; margin-top: 22px; opacity: 0.9; }
.del-card .btn { width: 100%; margin-top: 12px; text-align: center; }
.btn.danger { background: #8f3b32; border-color: var(--choc); color: #fff; }
.btn.danger:hover { background: #a3341f; }

/* ---------- Reservation time picker ---------- */
.timepick { position: relative; }
.timepick-btn {
  width: 100%; display: flex; align-items: center; gap: 10px;
  background: #fffdf8; border: 2px solid var(--line); color: var(--para);
  padding: 13px 15px; font-family: var(--sans); font-size: 15px;
  letter-spacing: 0.02em; text-align: left; border-radius: 2px;
  transition: border-color 0.3s, color 0.3s;
}
.timepick-btn:hover { border-color: var(--accent); }
.timepick-btn.open { border-color: var(--accent); }
.timepick-btn.chosen { color: var(--ink); font-weight: 700; }
.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(--para);
  transition: transform 0.25s var(--ease);
}
.timepick-btn.open .tp-caret { transform: rotate(180deg); }
.timepick-btn svg { width: 16px; height: 16px; fill: var(--accent); flex: none; }
.timepick-panel {
  position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 6px);
  max-height: 232px; overflow-y: auto;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 10px;
  background: var(--paper); border: 2px solid var(--choc); border-radius: 2px;
  box-shadow: 6px 6px 0 rgba(44, 26, 13, 0.35);
}
.timepick-panel[hidden] { display: none; }
.timepick-slot {
  background: #fffdf8; border: 1px solid var(--line); color: var(--para);
  padding: 9px 4px; font-family: var(--sans); font-size: 13.5px; letter-spacing: 0.04em; border-radius: 2px;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.timepick-slot:hover { background: var(--accent-soft); color: var(--ink); border-color: var(--accent); }
.timepick-slot.on { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 700; }
.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(--paper); transition: opacity .25s ease;
}
.page-boot.gone { opacity: 0; pointer-events: none; }
.boot-mark { position: relative; width: 104px; height: 104px; display: grid; place-items: center; }
.boot-mark img { width: 62px; height: 62px; border-radius: 50%; }
.boot-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 3px solid rgba(51, 32, 15, 0.16); border-top-color: var(--accent);
  animation: bootSpin .9s linear infinite;
}
@keyframes bootSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .boot-ring { animation-duration: 2.4s; } }

/* ---------- Marketing ---------- */
/* Announcement strip: chocolate on butter, so it reads as the day's chalkboard
   rather than an alert. Sits above the fixed nav; promo.js pushes the nav down. */
.promo-banner {
  position: fixed; inset: 0 0 auto 0; z-index: 70;
  background: var(--butter);
  border-bottom: 2px solid var(--choc);
  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(--choc); font-weight: 700;
  font-size: 14px; letter-spacing: 0.08em; text-decoration: none;
}
a.promo-banner-text:hover { color: var(--accent-deep); }
@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; }
}

/* Live promotion notice on the menu page */
.promo-notice {
  display: block; margin: 0 auto 26px; max-width: 640px;
  background: var(--butter); color: var(--choc); font-weight: 700;
  border: 2px solid var(--choc); border-radius: 2px; padding: 10px 26px;
  box-shadow: 3px 3px 0 rgba(44, 26, 13, 0.7);
  text-align: center; font-size: 14.5px; letter-spacing: 0.06em;
}
.promo-notice.hidden { display: none; }

/* Small explainer under a form field */
.field-note { display: block; margin-top: 6px; font-size: 12.5px; color: rgba(92, 70, 50, 0.75); letter-spacing: 0.03em; }