/* MONTECRISTO Rabat design system.
   Built off the house's own printed carte and logo: velvet noir with a red
   undertone (the dinner-show room), Montecristo crimson for every accent (the
   red of the menu), rose-gold hairlines (the logo's gradient), and paper
   sections that read like the printed menu itself. Type is Bebas Neue condensed
   caps (how the carte sets its headings), Montserrat for everything spoken
   plainly, Great Vibes for the written flourishes ("Je suis un fin Gourmet").
   The recurring marks are the double hairline frame and the red diamond,
   both lifted straight off the menu's cover. */

:root {
  --noir: #120a0e;           /* velvet black, red undertone: the room lights off */
  --noir-2: #1c1116;         /* panel */
  --wine: #251218;           /* deep pockets, hover surfaces */
  --line: rgba(232, 166, 143, 0.26);      /* rose-gold hairline */
  --line-soft: rgba(232, 166, 143, 0.13);
  --text: #f5ebe4;           /* warm ivory */
  --para: #c9b3ad;           /* rosy taupe */
  --red: #d81f3d;            /* Montecristo crimson, the carte's own red */
  --red-deep: #9e1428;
  --red-soft: rgba(216, 31, 61, 0.14);
  --rose: #e8a68f;           /* rose-gold light, off the logo */
  --rose-2: #c96f7a;         /* rose-gold deep */
  --paper: #f6f2ef;          /* the printed menu's paper */
  --paper-2: #efe8e3;
  --ink: #1d1216;            /* what sits on paper and on red */
  --ink-soft: #5d4a4e;
  --sans: 'Montserrat', 'Segoe UI', sans-serif;
  --display: 'Bebas Neue', 'Arial Narrow', sans-serif;
  --script: 'Great Vibes', Georgia, cursive;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Ticket-corner cut, the geometric signature of every action */
  --notch: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--noir);
  color: var(--para);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.7;
  letter-spacing: 0.01em;
  -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(--red); color: #fff; }

/* ---------- Typography ---------- */
h1, h2, h3 { font-family: var(--display); font-weight: 400; color: var(--text); line-height: 1.02; }

/* Small red caps over every heading, exactly how the carte labels its
   sections ("NOS POISSONS" between two rules). The rules are drawn by the
   heading blocks that want them. */
.kicker {
  font-family: var(--display);
  font-size: clamp(15px, 1.5vw, 19px);
  color: var(--red);
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  text-transform: uppercase;
  display: block;
  line-height: 1.4;
}
.section-head.center .kicker {
  display: flex; align-items: center; justify-content: center; gap: 22px;
  text-indent: 0;
}
.section-head.center .kicker::before,
.section-head.center .kicker::after {
  content: ''; width: clamp(30px, 6vw, 84px); height: 1px; background: currentColor; opacity: 0.5;
}

.section-title {
  font-size: clamp(44px, 6vw, 82px);
  margin: 10px 0 16px;
  text-transform: uppercase;
  letter-spacing: 0.045em;
}
/* The one flourish per heading, written rather than printed */
.t-script {
  font-family: var(--script);
  font-style: normal;
  text-transform: none;
  letter-spacing: 0;
  color: var(--rose);
  font-size: 0.82em;
  font-weight: 400;
  vertical-align: -0.06em;
  padding-left: 0.12em;
}
.section-sub { color: var(--para); max-width: 560px; font-size: 15.5px; }

/* ---------- Layout ---------- */
.container { width: min(1180px, 90vw); margin: 0 auto; }
section { padding: clamp(84px, 10vw, 150px) 0; position: relative; }
.section-head { margin-bottom: clamp(36px, 5vw, 64px); }
.section-head.center { text-align: center; }
.section-head.center .section-sub { margin: 0 auto; }

/* ---------- Buttons: ticket corners, letterspaced caps ---------- */
.btn {
  display: inline-block;
  padding: 16px 40px;
  border: 1px solid rgba(245, 235, 228, 0.4);
  clip-path: var(--notch);
  color: var(--text);
  background: transparent;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  text-indent: 0.22em;
  font-family: var(--display);
  font-size: 15px;
  transition: background 0.4s var(--ease), color 0.4s var(--ease), border-color 0.4s;
}
.btn:hover { background: var(--red); border-color: var(--red); color: #fff; }
.btn.solid { background: var(--red); border-color: var(--red); color: #fff; }
.btn.solid:hover { background: transparent; border-color: var(--rose); color: var(--rose); }
.btn.ghost { border-color: var(--line); color: var(--para); }
.btn.ghost:hover { border-color: var(--red); background: var(--red); color: #fff; }
.btn:disabled { opacity: 0.5; pointer-events: none; }

/* ---------- Nav ---------- */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  transition: background 0.4s, box-shadow 0.4s, padding 0.4s;
  padding: 18px 0;
}
.nav.scrolled { background: rgba(18, 10, 14, 0.95); backdrop-filter: blur(12px); padding: 10px 0; box-shadow: 0 1px 0 var(--line-soft); }
.nav.menu-open, .nav.scrolled.menu-open { backdrop-filter: none; 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; gap: 12px; }
.nav-logo img { height: 54px; width: 54px; min-width: 54px; 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: 44px; width: 44px; min-width: 44px; }
/* The wordmark next to the monogram, condensed like the carte's footer */
.nav-word {
  font-family: var(--display);
  font-size: 21px;
  letter-spacing: 0.34em;
  color: var(--text);
  text-transform: uppercase;
  white-space: nowrap;
}
.nav-links { display: flex; gap: 22px; align-items: center; justify-content: 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: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text);
  opacity: 0.95;
  transition: opacity 0.3s, color 0.3s;
  position: relative;
  padding: 6px 0;
}
/* Hover: a small red diamond blooms under the link rather than an underline */
.nav-links a::after {
  content: '◆';
  position: absolute;
  left: 50%; bottom: -8px;
  transform: translateX(-50%) scale(0);
  color: var(--red);
  font-size: 7px;
  transition: transform 0.3s var(--ease);
}
.nav-links a:hover { opacity: 1; color: var(--rose); }
.nav-links a:hover::after { transform: translateX(-50%) scale(1); }
.nav-cta {
  border: 1px solid rgba(245, 235, 228, 0.4);
  clip-path: var(--notch);
  padding: 10px 20px !important;
  font-family: var(--display) !important;
  font-size: 14px !important;
  letter-spacing: 0.18em !important;
  font-weight: 400 !important;
}
.nav-links > li > a, .nav-right > li > a { white-space: nowrap; }
.nav-cta:hover { background: var(--red); border-color: var(--red); color: #fff !important; }

/* Two-state toggle with the sliding knob */
.lang-switch {
  position: relative; display: flex; padding: 3px;
  border: 1px solid var(--line-soft);
}
.lang-switch::before {
  content: ''; position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px);
  background: var(--red);
  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: var(--para);
  font-size: 10.5px; letter-spacing: 0.12em; padding: 6px 13px;
  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; }
.burger span { position: absolute; left: 0; width: 100%; height: 1.5px; background: var(--text); 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: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: 660px;
  position: relative;
  display: grid;
  place-items: center;
  text-align: center;
  overflow: hidden;
  padding: 0;
}
.hero-bg { position: absolute; inset: 0; background: var(--noir); }
.hero-bg video, .hero-bg img { width: 100%; height: 100%; object-fit: cover; }
.hero-bg img.kb { animation: kenburns 26s var(--ease) infinite alternate; }
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.09); } }
/* The room glows red; the scrim leans into it instead of flattening it */
.hero-bg::after {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(90% 60% at 50% 42%, rgba(216, 31, 61, 0.10), transparent 65%),
    linear-gradient(180deg, rgba(18, 10, 14, 0.62) 0%, rgba(18, 10, 14, 0.28) 45%, rgba(18, 10, 14, 0.85) 100%);
}
/* The double hairline frame off the printed carte, drawn inside the viewport */
.hero-frame {
  position: absolute; inset: clamp(14px, 2.4vw, 30px); z-index: 2;
  border: 1px solid rgba(232, 166, 143, 0.35);
  outline: 1px solid rgba(232, 166, 143, 0.14);
  outline-offset: 5px;
  pointer-events: none;
}
.hero-content { position: relative; z-index: 3; padding: 0 24px; }
.hero-over {
  font-size: 11.5px; letter-spacing: 0.5em; text-indent: 0.5em; text-transform: uppercase;
  color: var(--rose); font-weight: 600;
}
/* The name itself is the headline, set like the carte's cover */
.hero-name {
  font-family: var(--display);
  font-size: clamp(64px, 12.5vw, 176px);
  letter-spacing: 0.12em;
  text-indent: 0.12em;
  color: #fff;
  line-height: 1;
  margin-top: 10px;
  text-shadow: 0 6px 60px rgba(0, 0, 0, 0.55);
}
.hero-script {
  font-family: var(--script);
  font-size: clamp(30px, 4vw, 54px);
  color: var(--rose);
  line-height: 1.1;
  margin-top: 2px;
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
}
.hero-tag {
  margin-top: 20px;
  color: rgba(255, 255, 255, 0.92);
  font-size: clamp(11px, 1.4vw, 14px);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.42em;
  text-indent: 0.42em;
}
.hero-actions { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; margin-top: 40px; }

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

/* Opening hours under the hero buttons, split by the red diamond */
.hero-hours {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  margin-top: 32px; font-family: var(--display); font-size: 17px;
  letter-spacing: 0.3em; text-indent: 0.3em; color: var(--rose);
}
.hero-hours .dia { display: block; width: 7px; height: 7px; background: var(--red); transform: rotate(45deg); }
@media (max-width: 700px) { .hero-hours { margin-top: 24px; letter-spacing: 0.2em; } }

/* ---------- The house ticker ---------- */
.mc-ticker {
  background: var(--red);
  color: #fff;
  overflow: hidden;
  padding: 11px 0;
  border-block: 1px solid rgba(0, 0, 0, 0.25);
}
.mc-ticker-track {
  display: flex; align-items: center; gap: 3rem; width: max-content;
  animation: mc-tick 26s linear infinite;
}
.mc-ticker span {
  font-family: var(--display); font-size: 16px; letter-spacing: 0.24em;
  text-transform: uppercase; white-space: nowrap;
}
.mc-ticker b { font-size: 9px; }
@keyframes mc-tick { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Rotating reserve badge */
.reserve-badge {
  position: fixed; right: 34px; bottom: 34px; z-index: 55;
  width: 110px; height: 110px; display: grid; place-items: center;
}
.reserve-badge svg { position: absolute; inset: 0; animation: spin 14s linear infinite; }
.reserve-badge svg text { fill: var(--rose); font-family: var(--sans); font-size: 8.4px; letter-spacing: 0.28em; text-transform: uppercase; }
.reserve-badge .badge-center { display: grid; place-items: center; transition: transform 0.5s var(--ease); }
.reserve-badge .badge-center img { width: 50px; height: 50px; border-radius: 50%; background: #fff; }
.reserve-badge:hover .badge-center { transform: scale(1.1); }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- 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, .mc-ticker-track { animation: none; }
  .hero video { display: none; }
}

/* ---------- About ---------- */
#about {
  background:
    radial-gradient(70% 50% at 85% 10%, rgba(216, 31, 61, 0.06), transparent 60%),
    var(--noir);
}
.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; }
/* Two framed prints, pinned like photographs on the wall of the house:
   sharp corners and the double hairline, never an arch */
.about-images .img-main {
  width: 80%;
  border: 1px solid var(--line);
  outline: 1px solid var(--line-soft);
  outline-offset: 7px;
  padding: 10px;
  background: var(--noir-2);
}
.about-images .img-accent {
  position: absolute; right: 0; bottom: 0; width: 46%;
  border: 1px solid var(--line);
  padding: 8px;
  background: var(--noir-2);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
}
.img-frame { overflow: hidden; }
.img-frame img { transition: transform 1.2s var(--ease), filter 1.2s var(--ease); }
.img-frame:hover img { transform: scale(1.05); filter: saturate(1.1); }
.about-text p { color: var(--para); margin: 22px 0; font-size: 15.5px; }
/* The written signature, the house's own slogan */
.about-sign { font-family: var(--script); font-size: clamp(38px, 4vw, 54px); color: var(--rose); margin-top: 12px; line-height: 1.15; }

/* ---------- Menu: the paper sections, set like the printed carte ---------- */
.menu-section { background: var(--paper); color: var(--ink-soft); }
.menu-section .kicker { color: var(--red); }
.menu-section .section-title { color: var(--ink); }
.menu-section .t-script { color: var(--red); }
.menu-section .section-sub { color: var(--ink-soft); }
/* The carte's own double border, wrapped round the whole band */
.menu-section .container { position: relative; }
#menu.menu-section::before {
  content: '';
  position: absolute; inset: clamp(16px, 2.4vw, 30px);
  border: 1px solid rgba(216, 31, 61, 0.35);
  outline: 1px solid rgba(216, 31, 61, 0.14);
  outline-offset: 5px;
  pointer-events: none;
}
.menu-tabs { display: flex; justify-content: center; gap: 10px; margin-bottom: 44px; }
.menu-tabs button {
  background: transparent; border: 1px solid rgba(29, 18, 22, 0.25); color: var(--ink-soft);
  clip-path: var(--notch);
  padding: 12px 36px; text-transform: uppercase; letter-spacing: 0.26em; text-indent: 0.26em;
  font-family: var(--display); font-size: 15px; transition: 0.35s;
}
.menu-tabs button.active { border-color: var(--red); color: #fff; background: var(--red); }
.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 headings exactly as the carte prints them: red condensed caps
   between two rules */
.menu-cat h3 {
  font-family: var(--display);
  font-size: 24px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 14px;
  display: flex; align-items: center; gap: 16px;
}
.menu-cat h3::before { content: ''; width: 26px; height: 1px; background: rgba(216, 31, 61, 0.5); flex: none; }
.menu-cat h3::after { content: ''; flex: 1; height: 1px; background: rgba(216, 31, 61, 0.35); }
.menu-cat-sub {
  font-style: italic;
  color: var(--ink-soft);
  font-size: 13.5px;
  margin: -8px 0 10px;
}
.menu-item { display: flex; align-items: baseline; gap: 10px; padding: 6px 0; }
.menu-item .mi-name { font-size: 14px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink); white-space: nowrap; }
.menu-item .mi-dots { flex: 1; border-bottom: 1px dotted rgba(216, 31, 61, 0.4); transform: translateY(-4px); }
.menu-item .mi-price { font-family: var(--display); color: var(--red); font-size: 17px; letter-spacing: 0.06em; white-space: nowrap; }
.menu-item-desc { color: var(--ink-soft); font-style: italic; font-size: 13px; margin: -3px 0 6px; max-width: 88%; }
.menu-actions { text-align: center; margin-top: 44px; }
.menu-section .btn { border-color: rgba(29, 18, 22, 0.4); color: var(--ink); }
.menu-section .btn:hover { background: var(--red); border-color: var(--red); color: #fff; }

/* ---------- The booking button ---------- */
.btn.wa-btn {
  display: inline-flex; align-items: center; gap: 11px;
  background: #25d366; border-color: #25d366; color: #06301a;
}
.btn.wa-btn:hover { background: #1fb457; border-color: #1fb457; color: #06301a; }
.btn.wa-btn.busy { opacity: .6; pointer-events: none; }
.btn.wa-btn svg { width: 19px; height: 19px; fill: currentColor; flex: none; }
.menu-page { padding-top: clamp(46px, 5vw, 74px); }
.menu-page .promo-notice { margin-bottom: 22px; }

/* Sold by the glass and by the bottle: one row, two price columns */
.menu-cat.two-way .mi-price { width: 5.6em; text-align: right; }
.menu-cat.two-way .mi-price.alt { width: 6.2em; }
.menu-item.mi-head { padding: 0 0 4px; border-bottom: 1px solid rgba(29, 18, 22, 0.15); margin-bottom: 4px; }
.menu-item.mi-head .mi-price {
  font-family: var(--sans);
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-soft); opacity: 0.85;
}

/* ---------- Spaces ---------- */
#spaces {
  background:
    radial-gradient(60% 50% at 15% 90%, rgba(216, 31, 61, 0.05), transparent 60%),
    var(--noir);
}
.spaces-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.space-card {
  position: relative; overflow: hidden; aspect-ratio: 3 / 4.2;
  border: 1px solid var(--line-soft);
  padding: 8px;
  background: var(--noir-2);
  transition: border-color 0.4s var(--ease);
}
.space-card:hover { border-color: var(--red); }
.space-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease), filter 1.2s var(--ease); }
.space-card:hover img { transform: scale(1.07); filter: saturate(1.12); }
.space-card::after {
  content: '';
  position: absolute; inset: 8px;
  background: linear-gradient(180deg, transparent 52%, rgba(18, 10, 14, 0.92));
  pointer-events: none;
}
.space-card figcaption {
  position: absolute; left: 0; right: 0; bottom: 24px; z-index: 2;
  text-align: center;
  font-family: var(--display);
  font-size: 20px; letter-spacing: 0.3em; text-indent: 0.3em; text-transform: uppercase; color: var(--text);
}
.space-card figcaption::before {
  content: '◆'; display: block; color: var(--red); font-size: 8px; margin-bottom: 8px;
  letter-spacing: 0; text-indent: 0;
}
.space-card figcaption small:empty { display: none; }
.space-card figcaption small {
  display: block;
  font-family: var(--script);
  font-size: 21px; letter-spacing: 0; text-indent: 0; text-transform: none;
  color: var(--rose); margin-top: 2px;
}

/* ---------- Happy hour band: the carte's red banner, full width ---------- */
.afterwork {
  background:
    radial-gradient(80% 90% at 80% 20%, rgba(255, 255, 255, 0.07), transparent 55%),
    linear-gradient(120deg, var(--red-deep), var(--red) 60%, #e6394f);
  color: #ffe9e0;
  border-block: 1px solid rgba(0, 0, 0, 0.25);
}
.afterwork .kicker { color: #ffd9cb; }
.afterwork .section-title { color: #fff; }
.afterwork .t-script { color: #ffd9cb; }
.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: #ffe9e0; margin-bottom: 22px; max-width: 46ch; }
.afterwork-time {
  font-family: var(--display); font-size: 21px; letter-spacing: 0.18em;
  color: #fff; margin: 0 0 16px !important;
  display: inline-block; border-block: 1px solid rgba(255, 255, 255, 0.4);
  padding: 6px 2px;
}
.afterwork-copy .btn { margin-top: 6px; background: var(--noir); border-color: var(--noir); color: #fff; }
.afterwork-copy .btn:hover { background: transparent; border-color: #fff; color: #fff; }
/* The card list reads as the paper carte pinned onto the red band */
.afterwork-list {
  background: var(--paper);
  border: 1px solid rgba(0, 0, 0, 0.2);
  outline: 1px solid rgba(255, 255, 255, 0.35);
  outline-offset: 6px;
  padding: clamp(26px, 3vw, 40px) clamp(24px, 3vw, 38px);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3);
}
.aw-row { display: flex; align-items: baseline; gap: 10px; padding: 9px 0; }
.aw-name { font-size: 13.5px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink); }
.aw-dots { flex: 1; border-bottom: 1px dotted rgba(216, 31, 61, 0.45); transform: translateY(-4px); }
.aw-price { font-family: var(--display); font-size: 17px; color: var(--red); white-space: nowrap; }
@media (max-width: 900px) {
  .afterwork-inner { grid-template-columns: 1fr; }
}

/* ---------- Gallery ---------- */
.gallery-section {
  background:
    radial-gradient(70% 60% at 50% 0%, rgba(216, 31, 61, 0.07), transparent 60%),
    #0d0709;
}
.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: 74s; }
.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;
  transition: filter 0.5s, opacity 0.5s;
}
.gal-track img:hover { filter: brightness(1.14); }
@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(13, 7, 9, 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: 1px solid var(--line-soft); color: var(--text);
  width: 48px; height: 48px; font-size: 18px; transition: 0.3s; display: grid; place-items: center;
}
.lightbox button:hover { border-color: var(--red); color: var(--rose); }
.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: back on paper ---------- */
#hours { background: var(--paper-2); color: var(--ink-soft); }
#hours .kicker { color: var(--red); }
#hours .section-title { color: var(--ink); }
#hours .t-script { color: var(--red); }
.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 rgba(29, 18, 22, 0.12); 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: 600; color: var(--ink); }
.hours-list .day-note { font-style: italic; font-size: 13px; color: var(--red); }
.hours-list .dots { flex: 1; border-bottom: 1px dotted rgba(216, 31, 61, 0.4); transform: translateY(-4px); }
.hours-list .time { font-family: var(--display); font-size: 16px; letter-spacing: 0.08em; color: var(--ink); }
.hours-list .closed { color: var(--red); font-style: italic; }
.contact-lines { margin-top: 28px; display: grid; gap: 10px; color: var(--ink-soft); font-size: 15px; }
.contact-lines a:hover { color: var(--red); }
.contact-lines strong { color: var(--ink); font-weight: 500; }
#map { min-height: 420px; height: 100%; border: 1px solid rgba(29, 18, 22, 0.25); outline: 1px solid rgba(29, 18, 22, 0.1); outline-offset: 5px; z-index: 1; }
.map-pin { position: relative; width: 22px; height: 22px; }
.map-pin::before {
  content: '';
  position: absolute; inset: 3px;
  background: var(--red);
  border: 3px solid #fff;
  transform: rotate(45deg);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}
.map-pin::after {
  content: '';
  position: absolute; inset: -10px;
  border: 2px solid var(--red);
  transform: rotate(45deg);
  animation: pin-pulse 2s ease-out infinite;
}
@keyframes pin-pulse {
  from { transform: rotate(45deg) scale(0.5); opacity: 0.9; }
  to { transform: rotate(45deg) scale(1.3); opacity: 0; }
}
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: #fff; color: #333; }
.leaflet-popup-content a { color: #d81f3d; font-weight: 500; }

/* ---------- Reservation ---------- */
.reserve-section {
  background:
    radial-gradient(80% 70% at 50% 100%, rgba(216, 31, 61, 0.1), transparent 60%),
    linear-gradient(rgba(18, 10, 14, 0.88), rgba(18, 10, 14, 0.94)),
    url('../images/space-restaurant.jpg') center/cover fixed;
}
.reserve-panel {
  max-width: 760px; margin: 0 auto; background: rgba(28, 17, 22, 0.88);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  outline: 1px solid var(--line-soft);
  outline-offset: 7px;
  padding: clamp(34px, 5vw, 64px);
}
.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: 600; text-transform: uppercase; letter-spacing: 0.28em; color: var(--rose); opacity: 0.9; }
.form-field input, .form-field select {
  background: rgba(18, 10, 14, 0.6);
  border: 1px solid var(--line-soft);
  color: var(--text);
  padding: 14px 16px;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.03em;
  transition: border-color 0.3s;
  width: 100%;
  border-radius: 0;
  appearance: none;
}
.form-field input:focus, .form-field select:focus { outline: none; border-color: var(--red); }
.form-field input::placeholder { color: rgba(201, 179, 173, 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: dark; }
.phone-row { display: grid; grid-template-columns: 132px 1fr; gap: 10px; }
.form-note { color: var(--para); opacity: 0.85; font-size: 13px; margin-top: 18px; text-align: center; }
.form-submit { margin-top: 30px; text-align: center; }
.form-msg { margin-top: 18px; text-align: center; font-size: 14px; display: none; }
.form-msg.ok { display: block; color: #9fce9a; }
.form-msg.err { display: block; color: #f0a0a8; }

/* ---------- Footer ---------- */
footer { background: #0d0709; border-top: 1px solid var(--line-soft); padding: 60px 0 34px; overflow: hidden; }
/* The wordmark runs across the top of the footer as a hollow set piece */
.footer-word {
  font-family: var(--display);
  font-size: clamp(56px, 10vw, 150px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(232, 166, 143, 0.22);
  user-select: none;
  margin-bottom: 50px;
  white-space: nowrap;
}
.footer-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 44px; margin-bottom: 50px; }
.footer-grid h4 {
  font-family: var(--display); font-size: 17px; letter-spacing: 0.3em; text-transform: uppercase;
  margin-bottom: 16px; color: var(--red);
}
.footer-grid p, .footer-grid a, .footer-grid li { color: var(--para); font-size: 14px; list-style: none; }
.footer-grid a:hover { color: var(--rose); }
.footer-grid ul { display: grid; gap: 9px; }
.footer-logo { height: 52px; width: 52px; border-radius: 50%; background: #fff; 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-soft); padding-top: 26px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; color: var(--para); opacity: 0.85; font-size: 12px; letter-spacing: 0.08em; }
.footer-bottom a:hover { color: var(--rose); }

/* ---------- Subpages ---------- */
.page-hero { height: 48vh; min-height: 360px; display: grid; place-items: center; text-align: center; position: relative; overflow: hidden; padding: 0; }
.page-hero .hero-bg img { animation: none; }
.page-hero .hero-bg::after {
  background:
    radial-gradient(80% 60% at 50% 40%, rgba(216, 31, 61, 0.08), transparent 60%),
    linear-gradient(180deg, rgba(18, 10, 14, 0.7) 0%, rgba(18, 10, 14, 0.5) 45%, rgba(18, 10, 14, 0.85) 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(46px, 7vw, 92px); position: relative; z-index: 2; text-transform: uppercase; letter-spacing: 0.1em; }
.page-hero .kicker { position: relative; z-index: 2; }
.legal { max-width: 800px; margin: 0 auto; }
.legal h1 { text-transform: uppercase; letter-spacing: 0.06em; }
.legal h2 { font-size: 22px; letter-spacing: 0.14em; margin: 44px 0 14px; color: var(--rose); }
.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(--noir-2); border: 1px solid var(--red); color: var(--text);
  padding: 14px 28px; font-size: 13.5px; letter-spacing: 0.05em; z-index: 100;
  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: 1330px) {
  .nav-word { display: none; }
}
/* Below this the whole lot moves into the burger panel */
@media (max-width: 1260px) {
  .nav-inner { grid-template-columns: auto 1fr auto; }
  .nav-logo { grid-column: 1; justify-self: start; }
  .nav-logo img { height: 44px; }
  .nav-links {
    position: fixed; inset: 0;
    height: 100svh;
    background: #0d0709;
    flex-direction: column; justify-content: center; align-items: center; gap: 24px;
    /* clip-path slide instead of translateX: a translated full-screen panel
       widens the layout viewport and lets the page pan sideways on phones */
    clip-path: inset(0 0 0 100%);
    visibility: hidden;
    transition: clip-path 0.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-family: var(--display); font-size: 22px; letter-spacing: 0.28em; text-indent: 0.28em; display: inline-block; }
  .nav-links .nav-cta { border: 1px solid var(--red); padding: 14px 30px !important; }
  .nav-links li { width: 100%; text-align: center; opacity: 0; transform: translateY(16px); }
  .nav-links .lang-switch { display: inline-flex; }
  .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-links.open li:nth-child(8) { animation-delay: 0.5s; }
  .nav-right { display: none; }
  .nav-links .mobile-only { display: block; }
  .burger { display: block; }
  /* Simple navs (legal pages) have no burger: keep their links inline */
  .nav-simple .nav-links {
    position: static; height: auto; background: none;
    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; }
}

@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 band readable */
  .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.3em; text-indent: 0.3em; }
  .menu-item { flex-wrap: wrap; }
  .menu-item .mi-name { white-space: normal; max-width: 75%; }
  .menu-item .mi-dots { min-width: 20px; }

  /* Two price columns have to survive a narrow screen: the row never wraps,
     the name takes the slack and the two figures hold their columns. */
  .menu-cat.two-way .menu-item { flex-wrap: nowrap; align-items: baseline; }
  .menu-cat.two-way .mi-name { min-width: 0; max-width: none; flex: 1 1 auto; }
  .menu-cat.two-way .mi-dots { flex: 0 1 18px; min-width: 0; }
  .menu-cat.two-way .mi-price { flex: none; width: 3.6em; }
  .menu-cat.two-way .mi-price.alt { width: 4.4em; }
  .menu-cat.two-way .mi-head .mi-price { font-size: 8.5px; letter-spacing: 0.06em; }
}

@media (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(--red); color: #fff !important; border: 1px solid var(--red);
  clip-path: var(--notch); padding: 10px 20px !important;
  font-family: var(--display) !important; font-size: 14px !important;
  letter-spacing: 0.16em !important; font-weight: 400 !important;
  transition: background .3s, color .3s;
}
.nav-auth:hover { background: var(--red-deep); border-color: var(--red-deep); }
.nav-auth.signed-in { background: transparent; color: var(--rose) !important; border-color: var(--line); }

.page-account { background: #0d0709; }
.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(18, 10, 14,.66), rgba(18, 10, 14,.8) 55%, rgba(18, 10, 14,.94));
}
.page-account .nav {
  background: rgba(18, 10, 14, 0.95); backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--line-soft); padding: 10px 0;
}
.page-account .nav-logo img { height: 46px; }
.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 { border-top: 1px solid var(--line-soft); background: rgba(13, 7, 9,.6); }
.page-account .footer-word { display: none; }

.account-main section { padding: 0; }
.auth-wrap { display: flex; justify-content: center; width: 100%; }
.auth-card {
  width: min(560px, 100%); background: rgba(28, 17, 22, 0.9); border: 1px solid var(--line);
  outline: 1px solid var(--line-soft); outline-offset: 5px;
  padding: 30px 32px; text-align: center;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5);
}
.auth-logo { width: 54px; height: 54px; border-radius: 50%; background: #fff; margin-bottom: 8px; }
.auth-card .section-title { font-size: 30px; 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: 600; text-transform: uppercase; letter-spacing: 0.15em;
  color: var(--rose); opacity: 0.85; margin-top: 6px;
}
.auth-form input {
  width: 100%; background: rgba(13, 7, 9, 0.7); border: 1px solid var(--line-soft);
  border-radius: 0; padding: 11px 13px; color: var(--text);
  font-family: var(--sans); font-size: 14.5px;
}
.auth-form input:focus { outline: none; border-color: var(--red); }
.auth-form .btn { margin-top: 14px; width: 100%; }
.auth-form .btn.ghost { margin-top: 8px; }
.auth-hint { font-size: 10.5px; color: var(--para); opacity: 0.7; line-height: 16px; margin-top: 4px; }
.gender-row { display: flex; gap: 8px; }
.gender-row button {
  flex: 1; background: rgba(13, 7, 9, 0.7); border: 1px solid var(--line-soft); border-radius: 0;
  color: var(--para); padding: 9px 6px; font-size: 13px; font-family: var(--sans); transition: .25s;
}
.gender-row button:hover { border-color: var(--red); }
.gender-row button.active { border-color: var(--red); background: var(--red-soft); color: var(--rose); }
.auth-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.auth-msg { font-size: 13px; min-height: 18px; margin-top: 8px; text-align: center; grid-column: 1 / -1; }
.auth-msg.err { color: #f0a0a8; }
.auth-msg.ok { color: #9fce9a; }
.auth-switch { font-size: 13px; color: var(--para); text-align: center; margin-top: 10px; grid-column: 1 / -1; }
.auth-switch a { color: var(--rose); text-decoration: underline; }
.pending-title { font-family: var(--display); font-size: 26px; letter-spacing: 0.08em; 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: rgba(28, 17, 22,.86); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--line); padding: 26px; }
.member-card h3 { font-family: var(--display); font-size: 22px; letter-spacing: 0.08em; 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, var(--red-deep), #5e0e1d 60%, var(--noir-2)); border-color: var(--red); }
.fidelity-card .kicker { display: block; margin-bottom: 6px; }
.fidelity-card b { font-family: var(--display); font-size: 54px; color: #fff; line-height: 1; }
.fidelity-card p { color: #ffd9cb; font-size: 13px; margin-top: 10px; line-height: 20px; }
.fidelity-card.off b { color: var(--para); opacity: 0.6; }

.member-heading { font-family: var(--display); font-size: 24px; letter-spacing: 0.1em; margin-bottom: 16px; }
.res-list { display: grid; gap: 12px; }
.res-card {
  display: flex; align-items: center; gap: 18px; background: rgba(28, 17, 22,.86);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--line-soft); padding: 16px 20px;
}
.res-when { display: grid; min-width: 88px; }
.res-when b { font-family: var(--display); font-size: 21px; letter-spacing: 0.06em; color: var(--rose); }
.res-when span { font-size: 12px; color: var(--para); opacity: 0.8; }
.res-meta { display: grid; flex: 1; }
.res-meta b { font-size: 14px; font-weight: 500; }
.res-meta span { font-size: 12px; color: var(--para); opacity: 0.7; }
.res-badge { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; padding: 6px 12px; border: 1px solid; }
.res-badge.pending { color: var(--rose); border-color: var(--red); }
.res-badge.confirmed { color: #9fce9a; border-color: rgba(159, 206, 154, 0.5); }
.res-badge.cancelled { color: #f0a0a8; border-color: rgba(240, 160, 168, 0.5); }

.prefill-note { color: var(--rose); 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: 12px !important; }
  .auth-card { padding: 24px 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;
}
.contact-band::before {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(18, 10, 14,.84), rgba(37, 18, 24,.6) 45%, rgba(18, 10, 14,.88)),
    radial-gradient(120% 80% at 50% 50%, rgba(0,0,0,0) 35%, rgba(13, 7, 9,.5) 100%);
}
.contact-band > .container { position: relative; }
.contact-inner { text-align: center; max-width: 1060px; margin: 0 auto; }
.contact-inner .section-title { font-size: clamp(40px, 5.4vw, 66px); margin-bottom: 14px; }
.contact-lead { color: var(--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: rgba(28, 17, 22, 0.78); border: 1px solid var(--line);
  padding: 18px 20px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: border-color .3s var(--ease), transform .3s var(--ease), background .3s var(--ease);
}
a.contact-card:hover { border-color: var(--red); transform: translateY(-3px); background: rgba(28, 17, 22, 0.92); }
.cc-icon {
  width: 42px; height: 42px; flex: none; display: grid; place-items: center;
  background: var(--red-soft); border: 1px solid var(--line);
  transform: rotate(45deg);
}
.cc-icon svg { width: 15px; height: 15px; fill: var(--rose); transform: rotate(-45deg); }
.cc-body { display: grid; gap: 3px; min-width: 0; }
.cc-body small { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--para); opacity: 0.8; }
.cc-body b { font-weight: 400; font-size: 14.5px; color: var(--text); overflow-wrap: anywhere; }

.contact-actions { display: flex; gap: 14px; 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: rgba(13, 7, 9, 0.7); border: 1px solid var(--line-soft);
  border-radius: 0; padding: 11px 13px; color: var(--text);
  font-family: var(--sans); font-size: 14.5px; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--rose) 50%),
                    linear-gradient(135deg, var(--rose) 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(--red); }
.auth-form select option { background: var(--noir-2); color: var(--text); }

.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(--rose); opacity: 1; }
.pw-eye.on .eye-open { display: none; }
.pw-eye.on .eye-shut { display: block; }
.pw-eye:hover { color: var(--text); 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); opacity: 1; cursor: pointer;
}
.stay-row input { width: 16px; height: 16px; accent-color: var(--red); 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(--rose);
  text-decoration: underline; white-space: nowrap;
}
.forgot-link:hover { color: var(--red); }
.birthday-note {
  font-size: 12px; color: var(--rose); margin-top: 10px; text-align: center;
  background: var(--red-soft); border: 1px solid var(--line); padding: 9px 12px;
}

/* ---------- Members' deal prices ---------- */
.mi-was { color: currentColor; opacity: 0.5; margin-right: 10px; font-size: 0.92em; }
.mi-deal { color: #2c8a4b; font-weight: 500; }
.menu-section .mi-deal { color: #2c8a4b; }
.nav-deals { color: #9fce9a !important; }

/* ---------- Deals page ---------- */
.deals-main { align-items: flex-start; padding-top: 118px; }
.deals-main .section-head { margin-bottom: 30px; }
.deals-empty {
  background: rgba(28, 17, 22,.86); border: 1px solid var(--line);
  padding: 40px 30px; text-align: center; color: var(--para); max-width: 560px; margin: 0 auto;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.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; letter-spacing: 0.14em; margin-bottom: 16px; }
.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: rgba(28, 17, 22,.88); border: 1px solid rgba(159, 206, 154,.35);
  padding: 14px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: transform .3s var(--ease), border-color .3s var(--ease);
}
.deal-card:hover { transform: translateY(-3px); border-color: #9fce9a; }
.deal-card img { width: 74px; height: 74px; object-fit: cover; flex: none; }
.deal-body { min-width: 0; flex: 1; }
.deal-body h3 { font-size: 16px; font-weight: 500; font-family: var(--sans); margin-bottom: 2px; color: var(--text); }
.deal-body p { color: var(--para); font-size: 12px; opacity: .8; 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: .55; font-size: 13px; }
.deal-prices b { color: #9fce9a; font-size: 17px; font-weight: 500; }
.deal-badge {
  position: absolute; top: 12px; right: 12px; background: rgba(159, 206, 154,.16);
  color: #9fce9a; padding: 4px 10px; font-size: 11px; 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(--rose); margin-bottom: 10px; font-family: var(--sans); font-weight: 600;
}
.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; transform: rotate(45deg); background: var(--red); }
.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-soft); padding-top: 16px; margin-top: 22px; opacity: 0.85; }
.del-card .btn { width: 100%; margin-top: 12px; text-align: center; }
.btn.danger { background: var(--red-deep); border-color: var(--red-deep); color: #fff; }
.btn.danger:hover { background: transparent; border-color: #f0a0a8; color: #f0a0a8; }

/* ---------- Reservation time picker ---------- */
.timepick { position: relative; }
.timepick-btn {
  width: 100%; display: flex; align-items: center; gap: 10px;
  background: rgba(18, 10, 14, 0.6); border: 1px solid var(--line-soft); color: var(--para);
  padding: 14px 16px; font-family: var(--sans); font-size: 15px; font-weight: 400;
  letter-spacing: 0.03em; text-align: left; transition: border-color 0.3s, color 0.3s;
}
.timepick-btn:hover { border-color: var(--red); }
.timepick-btn.open { border-color: var(--red); }
.timepick-btn.chosen { color: var(--text); }
.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(--rose); 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(--noir-2); border: 1px solid var(--line);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
}
.timepick-panel[hidden] { display: none; }
.timepick-slot {
  background: rgba(255, 255, 255, 0.04); border: 1px solid transparent; color: var(--para);
  padding: 9px 4px; font-family: var(--sans); font-size: 13.5px; letter-spacing: 0.04em;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.timepick-slot:hover { background: var(--red-soft); color: var(--text); border-color: var(--red); }
.timepick-slot.on { background: var(--red); color: #fff; border-color: var(--red); }
.timepick-panel::-webkit-scrollbar { width: 6px; }
.timepick-panel::-webkit-scrollbar-thumb { background: var(--line); }

@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: #0d0709; 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%; background: #fff; }
.boot-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid rgba(232, 166, 143, 0.2); border-top-color: var(--red);
  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. Sits above the fixed nav, which promo.js pushes down by
   the measured height. */
.promo-banner {
  position: fixed; inset: 0 0 auto 0; z-index: 70;
  background: var(--red);
  border-bottom: 1px solid rgba(0, 0, 0, 0.25);
  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: #fff; font-weight: 700;
  font-size: 13.5px; letter-spacing: 0.1em; text-decoration: none;
  text-transform: uppercase;
}
a.promo-banner-text:hover { color: #ffd9cb; }
@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(--red); color: #fff; font-weight: 700;
  padding: 11px 26px;
  text-align: center; font-size: 14px; letter-spacing: 0.06em;
  clip-path: var(--notch);
}
.promo-notice.hidden { display: none; }

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

/* ---------- The dinner show rail ---------- */
.ritual-section {
  background:
    radial-gradient(60% 70% at 50% 15%, rgba(216, 31, 61, 0.12), transparent 62%),
    var(--noir);
  overflow: hidden;
}
.ritual-stage { position: relative; }
.ritual-marquee {
  position: relative;
  width: 100vw; margin-left: calc(50% - 50vw);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
/* The drift is JavaScript moving scrollLeft, not a keyframe, so that dragging
   and swiping use the very same mechanism and cannot fight it. */
.ritual-track {
  display: flex;
  gap: clamp(14px, 1.6vw, 24px);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior-x: contain;
  padding: 4px 0;
}
.ritual-track::-webkit-scrollbar { display: none; }

.ritual-card {
  flex: 0 0 auto;
  width: clamp(240px, 26vw, 380px);
  aspect-ratio: 1 / 1;
  padding: 7px;
  border: 1px solid var(--line-soft);
  overflow: hidden;
  background: var(--noir-2);
  cursor: zoom-in;
  transition: border-color 0.4s var(--ease), transform 0.4s var(--ease);
}
.ritual-card img { width: 100%; height: 100%; object-fit: cover; display: block; -webkit-user-drag: none; user-select: none; }
.ritual-card:hover { border-color: var(--red); transform: translateY(-4px); }

.ritual-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 3;
  width: 58px; height: 58px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  background: rgba(18, 10, 14, 0.78);
  backdrop-filter: blur(6px);
  color: var(--text);
  transition: background 0.35s var(--ease), color 0.35s var(--ease),
              border-color 0.35s var(--ease), transform 0.35s var(--ease);
}
.ritual-arrow.prev { left: clamp(10px, 3vw, 46px); }
.ritual-arrow.next { right: clamp(10px, 3vw, 46px); }
.ritual-arrow svg {
  width: 22px; height: 22px;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.ritual-arrow:hover {
  background: var(--red); border-color: var(--red); color: #fff;
  transform: translateY(-50%) scale(1.07);
}
.ritual-arrow:active { transform: translateY(-50%) scale(0.96); }
.ritual-arrow:focus-visible { outline: 2px solid var(--rose); outline-offset: 3px; }

@media (max-width: 760px) {
  .ritual-arrow { width: 46px; height: 46px; }
  .ritual-arrow svg { width: 18px; height: 18px; }
}