/* ==========================================================================
   BACKSTAGE, Casablanca Maarif. Food & Live.

   The design brief in one line: a gig poster you can eat at.

   Everything is driven from the :root block. The house's own identity is a
   white audio-jack cable drawn into a circle on matte black, and its room is
   lit two ways at once: magenta-violet stage light over the scene, tungsten
   over the wood of the bar. The site keeps that split. The page is the room
   at night (ink black, chalk white, one neon accent taken from their own
   posters); the carte and the hours are printed things, so they sit on a
   matte flyer stock like the poster wall by the stage door.

   Type is three families, each with one job:
   - Big Shoulders Display: every heading, every dish, every price. Tall
     condensed marquee caps, the letters of a venue's front sign.
   - Sora: everything functional. Paragraphs, forms, nav, labels.
   - Permanent Marker means one thing only: what plays tonight. The scrawl
     on the setlist taped to the amp. Never decoration.

   One signature device carries the page: the gaffer-tape label. Every
   section eyebrow is a strip of tape, slightly out of true, with the
   section's subject written across it. Buttons are ticket stubs: notched
   at the sides, perforated before the edge. Between the dark bands runs a
   thin LED meter line. Nothing else is shaped.

   None of this is shared with the sibling sites (Weston: teal/bronze,
   Jost/Cormorant, arches. H: walnut/terracotta, Oswald. Artigiano: plaster
   burgundy Fraunces. Mare Nostrum: wine-black/pearl Bodoni. Montecristo:
   crimson Bebas). No colour, face or shape overlaps.
   ========================================================================== */

:root {
  /* the room */
  --ink: #0a0a0c;          /* the black walls and ceiling */
  --ink-2: #060607;        /* the deepest band */
  --case: #141318;         /* flight-case panels, cards, form fields */
  --case-2: #1b1a21;       /* raised edge of the same case */
  --chalk: #f2efe9;        /* the logo's own white. Every action is this */
  --para: #b6b1b9;         /* the paragraph voice, warm grey */
  --faint: #7d7881;

  /* the light */
  --neon: #ff3d7a;         /* stage magenta, from the house's own posters */
  --neon-soft: rgba(255, 61, 122, 0.14);
  --violet: #8b79ff;       /* the wash a moving head leaves on black */
  --violet-soft: rgba(139, 121, 255, 0.10);
  --tungsten: rgba(232, 161, 61, 0.10); /* the wood of the bar, photos only */

  /* the printed sheet (carte, hours) */
  --paper-ink: #17141c;
  --paper-soft: #57505c;
  --paper-accent: #b3134f; /* the neon, inked down to clear 4.5:1 on stock */
  --paper-rule: rgba(23, 20, 28, 0.22);
  --paper-tape: rgba(23, 20, 28, 0.92);

  --line: rgba(242, 239, 233, 0.14);
  --line-soft: rgba(242, 239, 233, 0.08);

  --display: 'Big Shoulders Display', 'Arial Narrow', 'Oswald', sans-serif;
  --sans: 'Sora', 'Segoe UI', system-ui, sans-serif;
  --marker: 'Permanent Marker', 'Comic Sans MS', cursive;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --promo-h: 0px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  font-weight: 300;
  background: var(--ink);
  color: var(--para);
  font-size: 15.5px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: var(--chalk); text-decoration: none; transition: color 0.25s ease; }
a:hover { color: var(--neon); }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }
::selection { background: var(--neon); color: var(--ink); }

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

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--ink-2); }
::-webkit-scrollbar-thumb { background: #2c2a33; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: #3a3743; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.hidden { display: none !important; }
.muted { color: var(--faint); }

/* ==========================================================================
   Type and the shared devices
   ========================================================================== */

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  color: var(--chalk);
  line-height: 1.04;
  text-wrap: balance;
}

p { max-width: 65ch; }

/* The gaffer-tape label. The one device that carries the page: a strip of
   tape slightly out of true, the subject written across it in caps. Torn
   ends rather than cut, which is what tape pulled by hand looks like. */
.kicker {
  display: inline-block;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--chalk);
  padding: 6px 18px 5px;
  margin-bottom: 22px;
  transform: rotate(-1.4deg);
  clip-path: polygon(1.5% 0%, 98% 2%, 100% 30%, 99% 55%, 100% 78%, 98.5% 100%, 2% 98%, 0% 70%, 1% 42%, 0% 18%);
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
}
.section-head.center .kicker { transform: rotate(1.1deg); }

.section-title {
  font-size: clamp(40px, 5.4vw, 62px);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.035em;
  margin-bottom: 14px;
}
.section-sub { color: var(--para); max-width: 560px; }
.section-head { margin-bottom: 52px; }
.section-head.center { text-align: center; }
.section-head.center .section-sub { margin-left: auto; margin-right: auto; }

/* The LED meter line: a segmented strip fading out both ends, struck along
   the top of a band the way the desk's meters sit over the fader wall. */
.vu-top { position: relative; }
.vu-top::before {
  content: '';
  position: absolute; top: 0; left: 50%;
  width: min(560px, 72vw); height: 3px;
  transform: translateX(-50%);
  background: repeating-linear-gradient(90deg,
    rgba(242, 239, 233, 0.34) 0 9px, transparent 9px 15px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
}
.vu-top::after {
  content: '';
  position: absolute; top: 0; left: calc(50% + min(215px, 27vw));
  width: 33px; height: 3px;
  background: repeating-linear-gradient(90deg, var(--neon) 0 9px, transparent 9px 15px);
  filter: drop-shadow(0 0 6px rgba(255, 61, 122, 0.8));
}

/* ---------- Ticket-stub buttons ----------
   Notched at both sides and perforated before the right edge: an admit-one
   torn at the door. The notches are cut with a mask, so they are real holes
   over whatever the button sits on. */
.btn {
  --stub-face: rgba(242, 239, 233, 0.07);
  --stub-ink: var(--chalk);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-indent: 0.22em;
  text-transform: uppercase;
  color: var(--stub-ink);
  background:
    repeating-linear-gradient(180deg, rgba(242, 239, 233, 0.5) 0 4px, transparent 4px 8px)
      right 14px top / 1px 100% no-repeat,
    linear-gradient(var(--stub-face), var(--stub-face));
  padding: 15px 40px 14px 30px;
  border: none;
  -webkit-mask:
    radial-gradient(circle 7px at 0 50%, transparent 97%, #000) left / 51% 100% no-repeat,
    radial-gradient(circle 7px at 100% 50%, transparent 97%, #000) right / 50% 100% no-repeat;
          mask:
    radial-gradient(circle 7px at 0 50%, transparent 97%, #000) left / 51% 100% no-repeat,
    radial-gradient(circle 7px at 100% 50%, transparent 97%, #000) right / 50% 100% no-repeat;
  box-shadow: inset 0 0 0 1px rgba(242, 239, 233, 0.35);
  transition: transform 0.3s var(--ease), background-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
}
.btn:hover {
  transform: translateY(-2px);
  color: var(--chalk);
  box-shadow: inset 0 0 0 1px var(--neon), 0 6px 22px rgba(255, 61, 122, 0.16);
}
.btn.solid {
  --stub-face: var(--chalk);
  --stub-ink: var(--ink);
  background:
    repeating-linear-gradient(180deg, rgba(10, 10, 12, 0.55) 0 4px, transparent 4px 8px)
      right 14px top / 1px 100% no-repeat,
    linear-gradient(var(--chalk), var(--chalk));
  box-shadow: none;
}
.btn.solid:hover {
  color: var(--ink);
  background:
    repeating-linear-gradient(180deg, rgba(10, 10, 12, 0.55) 0 4px, transparent 4px 8px)
      right 14px top / 1px 100% no-repeat,
    linear-gradient(#ffffff, #ffd9e6);
  box-shadow: 0 8px 26px rgba(255, 61, 122, 0.25);
}
.btn.ghost { box-shadow: inset 0 0 0 1px rgba(242, 239, 233, 0.35); }
.btn.danger { --stub-ink: #ff8080; box-shadow: inset 0 0 0 1px rgba(255, 96, 96, 0.5); }
.btn.danger:hover { box-shadow: inset 0 0 0 1px #ff6060, 0 6px 22px rgba(255, 96, 96, 0.2); }
.btn:disabled { opacity: 0.45; cursor: default; transform: none; }
.btn.incomplete { opacity: 0.55; }

/* Buttons standing on a light ground (printed sheet or lit band) flip to ink */
.paper .btn, .lit .btn {
  --stub-face: transparent;
  --stub-ink: var(--paper-ink);
  background:
    repeating-linear-gradient(180deg, rgba(23, 20, 28, 0.5) 0 4px, transparent 4px 8px)
      right 14px top / 1px 100% no-repeat;
  box-shadow: inset 0 0 0 1.5px var(--paper-ink);
}
.paper .btn:hover, .lit .btn:hover { color: var(--paper-ink); box-shadow: inset 0 0 0 1.5px var(--paper-accent); }
.paper .btn.solid, .lit .btn.solid {
  background:
    repeating-linear-gradient(180deg, rgba(242, 239, 233, 0.5) 0 4px, transparent 4px 8px)
      right 14px top / 1px 100% no-repeat,
    linear-gradient(var(--paper-ink), var(--paper-ink));
  --stub-ink: var(--chalk);
  box-shadow: none;
}
.paper .btn.solid:hover, .lit .btn.solid:hover { color: var(--chalk); }

/* ==========================================================================
   Nav
   ========================================================================== */
.nav {
  position: fixed; top: var(--promo-h); left: 0; right: 0; z-index: 100;
  padding: 12px 0;
  transition: background 0.4s ease, box-shadow 0.4s ease, padding 0.3s ease;
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.nav-logo img { height: 46px; width: auto; transition: height 0.3s ease; }
.nav.scrolled {
  background: rgba(8, 8, 10, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--line-soft), 0 10px 30px rgba(0, 0, 0, 0.4);
  padding: 8px 0;
}
.nav.scrolled .nav-logo img { height: 40px; }

.nav-links { display: flex; list-style: none; gap: 26px; align-items: center; }
.nav-links a {
  position: relative;
  font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.18em; text-indent: 0.18em; text-transform: uppercase;
  color: var(--chalk);
  padding: 6px 0;
}
/* the cable-circle of the logo, struck small under the word on hover */
.nav-links a::after {
  content: '';
  position: absolute; left: 50%; bottom: -3px;
  width: 6px; height: 6px;
  border: 1.5px solid var(--neon);
  border-radius: 50%;
  transform: translateX(-50%) scale(0);
  transition: transform 0.28s var(--ease);
}
.nav-links a:hover { color: var(--chalk); }
.nav-links a:hover::after { transform: translateX(-50%) scale(1); }

.nav-right { display: flex; list-style: none; align-items: center; gap: 14px; }
.nav-cta {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.2em; text-indent: 0.2em; text-transform: uppercase;
  color: var(--ink) !important;
  background: var(--chalk);
  padding: 10px 20px;
  clip-path: polygon(2% 0%, 98% 3%, 100% 35%, 99% 68%, 100% 100%, 2% 97%, 0% 60%, 1% 25%);
  transition: background 0.25s ease, transform 0.25s ease;
}
.nav-cta:hover { background: var(--neon); transform: rotate(-1.2deg); }
.nav-auth {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.14em; text-indent: 0.14em; text-transform: uppercase;
  color: var(--chalk) !important;
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 9px 16px;
  transition: border-color 0.25s ease, background 0.25s ease, color 0.25s ease;
}
.nav-auth:hover { border-color: var(--chalk); }
.nav-auth.signed-in { border-color: var(--neon); color: var(--neon) !important; }
.nav-auth.signed-in:hover { background: var(--neon); color: var(--ink) !important; }
.nav-deals { color: var(--neon) !important; }

.lang-switch {
  position: relative;
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 3px;
  overflow: hidden;
}
.lang-switch::before {
  content: '';
  position: absolute; top: 0; bottom: 0; left: 0;
  width: 50%;
  background: var(--chalk);
  transition: transform 0.3s var(--ease);
}
.lang-switch.on-fr::before { transform: translateX(100%); }
.lang-switch button {
  position: relative; z-index: 1;
  background: none; border: none;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em;
  color: var(--para);
  padding: 7px 12px;
  transition: color 0.3s ease;
}
.lang-switch button.active { color: var(--ink); }

.burger { display: none; background: none; border: none; width: 40px; height: 34px; position: relative; z-index: 130; }
.burger span {
  display: block; height: 2px; background: var(--chalk);
  margin: 6px 8px; transition: transform 0.3s var(--ease), opacity 0.3s ease;
}
.burger.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
.mobile-only { display: none; }

/* ---------- Promo strip ---------- */
.promo-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 110;
  background: var(--neon);
  overflow: hidden;
  white-space: nowrap;
}
.promo-track { display: inline-flex; animation: promoSlide linear infinite; }
@keyframes promoSlide { to { transform: translateX(-50%); } }
.promo-banner-text {
  display: inline-block;
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink);
  padding: 8px 34px;
}
a.promo-banner-text:hover { color: var(--ink); text-decoration: underline; }
body.has-promo { --promo-h: 33px; }

/* ---------- Side rail ---------- */
.side-rail {
  position: fixed; left: 18px; top: 50%; z-index: 40;
  transform: translateY(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.42em; text-transform: uppercase;
  color: var(--faint);
  opacity: 0.65;
  pointer-events: none;
}

/* ==========================================================================
   Hero: the stage seen from a table, the sign over it
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  text-align: center;
  overflow: hidden;
  padding: calc(var(--promo-h) + 120px) 24px 90px;
}
.hero-bg { position: absolute; inset: 0; }
.hero-bg video, .hero-bg img {
  width: 100%; height: 100%; object-fit: cover;
}
.hero-bg img.kb { animation: kenburns 32s var(--ease) infinite alternate; }
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.09); } }
/* the room's own grade: ink floor, a violet wash from the rig, legible middle */
.hero-bg::after {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 55% at 50% 108%, rgba(10, 10, 12, 0.92), transparent 60%),
    linear-gradient(180deg, rgba(10, 10, 12, 0.55) 0%, rgba(10, 10, 12, 0.28) 40%, rgba(10, 10, 12, 0.82) 100%),
    radial-gradient(ellipse 60% 44% at 76% 0%, var(--violet-soft), transparent 70%);
}
.hero-content { position: relative; z-index: 2; max-width: 900px; }

/* the tape strip over the title: the house's own promise */
.hero-content::before {
  content: 'Food & Live';
  display: inline-block;
  font-family: var(--marker);
  font-size: clamp(17px, 2vw, 22px);
  color: var(--ink);
  background: var(--chalk);
  padding: 4px 26px 6px;
  transform: rotate(-2deg);
  clip-path: polygon(2% 4%, 98% 0%, 100% 42%, 99% 74%, 97% 100%, 2% 96%, 0% 55%, 1% 20%);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5);
  margin-bottom: 26px;
}
.hero-script {
  font-family: var(--display);
  font-size: clamp(52px, 9vw, 118px);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 0.96;
  color: var(--chalk);
  text-shadow: 0 4px 40px rgba(0, 0, 0, 0.55);
  margin-bottom: 20px;
}
.hero-tag {
  font-size: 13px; font-weight: 500;
  letter-spacing: 0.3em; text-indent: 0.3em; text-transform: uppercase;
  color: rgba(242, 239, 233, 0.85);
  margin: 0 auto 36px;
  max-width: none;
}
.hero-actions { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; margin-bottom: 44px; }

/* doors at seven, curfew at two: the running time under the title */
.hero-hours {
  display: inline-flex; align-items: center; gap: 16px;
  font-family: var(--display);
  font-size: 20px; font-weight: 600; letter-spacing: 0.14em;
  color: rgba(242, 239, 233, 0.92);
}
.hero-hours i {
  width: 90px; height: 3px;
  background: repeating-linear-gradient(90deg, rgba(242, 239, 233, 0.55) 0 7px, transparent 7px 12px);
  position: relative;
}
.hero-hours i::after {
  content: '';
  position: absolute; right: -2px; top: 0;
  width: 19px; height: 3px;
  background: repeating-linear-gradient(90deg, var(--neon) 0 7px, transparent 7px 12px);
  filter: drop-shadow(0 0 5px rgba(255, 61, 122, 0.9));
}

/* ---------- The rotating booking badge: the jack-cable circle at work ---------- */
.reserve-badge {
  position: fixed; right: 30px; bottom: 30px; z-index: 90;
  width: 112px; height: 112px;
  display: grid; place-items: center;
  filter: drop-shadow(0 8px 26px rgba(0, 0, 0, 0.55));
  transition: transform 0.3s var(--ease);
}
.reserve-badge:hover { transform: scale(1.07) rotate(3deg); }
.reserve-badge svg { position: absolute; inset: 0; animation: spinBadge 22s linear infinite; }
.reserve-badge text {
  font-family: var(--sans); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  fill: var(--chalk);
}
.badge-center {
  width: 62px; height: 62px;
  background: var(--ink);
  border: 1.5px solid var(--neon);
  border-radius: 50%;
  display: grid; place-items: center;
  box-shadow: 0 0 22px rgba(255, 61, 122, 0.35), inset 0 0 14px rgba(255, 61, 122, 0.12);
}
.badge-center img { width: 44px; height: 44px; }
@keyframes spinBadge { to { transform: rotate(360deg); } }

/* ==========================================================================
   Sections: the alternation. Dark bands are the room; two printed bands
   (the carte and the hours) sit on flyer stock, so the page breathes.
   ========================================================================== */
section { position: relative; padding: 104px 0; }

/* each dark band is washed from somewhere different, no two alike */
#about::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 46% 40% at 88% 4%, var(--violet-soft), transparent 70%);
}
#spaces::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 50% 42% at 8% 0%, var(--violet-soft), transparent 70%);
}
#about .container, #spaces .container { position: relative; z-index: 1; }

.paper {
  background: url('/images/paper.jpg') center / 900px auto repeat fixed;
  color: var(--paper-soft);
}
.paper .section-title, .paper h3, .lit .section-title, .lit h3 { color: var(--paper-ink); }
.paper .kicker, .lit .kicker {
  background: var(--paper-tape);
  color: var(--chalk);
  box-shadow: 0 2px 10px rgba(23, 20, 28, 0.28);
}
.paper .section-sub, .lit .section-sub { color: var(--paper-soft); }

/* ==========================================================================
   The lit bands. The page used to be the room at night wall to wall; now
   most of it is the poster wall by day, and the dark bands (hero, setlist,
   gallery, stage door, footer) become the stage moments they should be.
   Same identity, more light: chalk ground, ink type, the neon inked down
   to clear contrast, and the same violet/pink washes made pale.
   ========================================================================== */
.lit { background: #f6f3ee; color: var(--paper-soft); }
.lit p { color: var(--paper-soft); }
.lit #aboutText { color: var(--paper-soft); }

/* washes read pale on chalk, anchored like their dark cousins */
.lit#about::after {
  background: radial-gradient(ellipse 46% 40% at 88% 4%, rgba(139, 121, 255, 0.12), transparent 70%);
}
.lit#spaces { background: #f2eff5; }
.lit#spaces::after {
  background: radial-gradient(ellipse 50% 42% at 8% 0%, rgba(255, 61, 122, 0.07), transparent 70%);
}
.programme-section.lit { background: #f6f3ee; }
.programme-section.lit::after {
  background: radial-gradient(ellipse 70% 34% at 50% 102%, rgba(139, 121, 255, 0.12), transparent 72%);
}
.reserve-section.lit { background: #f2eff5; }
.reserve-section.lit::before {
  background: radial-gradient(ellipse 46% 42% at 92% 100%, rgba(255, 61, 122, 0.08), transparent 70%);
}

/* the LED rule struck in ink on a light ground */
.lit.vu-top::before {
  background: repeating-linear-gradient(90deg, rgba(23, 20, 28, 0.32) 0 9px, transparent 9px 15px);
}

/* photo prints on a light wall: white mounts, softer shadows */
.lit .img-main, .lit .img-accent {
  border-color: #ffffff;
  box-shadow: 0 20px 46px rgba(23, 20, 28, 0.28);
}
.lit .img-main::after, .lit .img-accent::after {
  background: rgba(23, 20, 28, 0.85);
}

/* the programme rack in daylight */
.lit .programme-grid { border-left-color: rgba(23, 20, 28, 0.16); }
.lit .prog-day { border-right-color: rgba(23, 20, 28, 0.16); }
.lit .prog-day:hover { background: rgba(23, 20, 28, 0.035); }
.lit .prog-name { color: var(--paper-ink); }
.lit .prog-hours { color: var(--paper-soft); }
.lit .prog-note { color: rgba(23, 20, 28, 0.72); }
.lit .prog-day.closed-day .prog-name, .lit .prog-day.closed .prog-name,
.lit .prog-day.closed-day .prog-hours, .lit .prog-day.closed .prog-hours { color: #a49eaa; }
.lit .prog-day.today {
  background: linear-gradient(180deg, rgba(255, 61, 122, 0.1), transparent 70%);
  box-shadow: inset 0 3px 0 var(--neon);
}
.lit .prog-day.today .prog-name { color: var(--paper-accent); }
.lit .prog-day.today .prog-note { color: var(--paper-accent); }

/* the guest list on a clipboard instead of a flight case */
.lit .reserve-panel {
  background: #fffdf9;
  border-color: rgba(23, 20, 28, 0.16);
  box-shadow: 0 30px 70px rgba(23, 20, 28, 0.2);
}
.lit .reserve-panel::before {
  color: var(--chalk);
  background: var(--paper-ink);
}
.lit .form-field label { color: var(--paper-soft); }
.lit .form-field input, .lit .form-field select, .lit .timepick-btn {
  background-color: #ffffff;
  border-color: rgba(23, 20, 28, 0.22);
  color: var(--paper-ink);
}
.lit .form-field input { background-image: none; }
.lit .form-field input:focus, .lit .form-field select:focus, .lit .timepick-btn:focus {
  border-color: var(--neon);
  box-shadow: 0 0 0 3px rgba(255, 61, 122, 0.16);
}
.lit .form-field input::placeholder { color: #a49eaa; }
.lit .form-field select {
  background-image: linear-gradient(45deg, transparent 50%, var(--paper-soft) 50%), linear-gradient(135deg, var(--paper-soft) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size: 6px 6px;
  background-repeat: no-repeat;
}
.lit input[type='date'] { color-scheme: light; }
.lit .timepick-btn svg { fill: var(--paper-soft); }
.lit .timepick-btn .tp-caret { border-top-color: var(--paper-soft); }
.lit .timepick-btn.open .tp-caret { border-top-color: var(--paper-soft); }
.lit .timepick-btn.chosen { color: var(--paper-ink); border-color: rgba(216, 27, 96, 0.55); }
.lit .timepick-panel {
  background: #ffffff;
  border-color: rgba(23, 20, 28, 0.18);
  box-shadow: 0 24px 50px rgba(23, 20, 28, 0.24);
}
.lit .timepick-slot { color: var(--paper-soft); }
.lit .timepick-slot:hover { background: rgba(23, 20, 28, 0.06); color: var(--paper-ink); }
.lit .timepick-slot.on { background: var(--neon); color: var(--ink); }
.lit .field-note, .lit .form-note { color: #8d8794; }
.lit .form-msg { color: #2e7d4f; }
.lit .form-msg.err { color: #c62839; }
.lit .prefill-note { color: var(--paper-accent); }

/* ---------- About ---------- */
.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: 72px;
  align-items: center;
}
.about-images { position: relative; min-height: 540px; }
.img-frame { position: relative; overflow: hidden; }
.img-frame img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease); }
.img-frame:hover img { transform: scale(1.045); }
/* photo prints pinned to the wall: white border, tape on the corner */
.img-main, .img-accent {
  border: 10px solid var(--chalk);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  overflow: visible;
}
.img-main img, .img-accent img { aspect-ratio: 4 / 5; }
.img-main::after, .img-accent::after {
  content: '';
  position: absolute; top: -22px; left: 50%;
  width: 92px; height: 26px;
  background: rgba(242, 239, 233, 0.88);
  transform: translateX(-50%) rotate(-3deg);
  clip-path: polygon(2% 8%, 98% 0%, 100% 60%, 99% 100%, 1% 92%, 0% 30%);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.img-main { width: 74%; transform: rotate(-1.4deg); }
.img-accent {
  position: absolute; right: 0; bottom: -36px;
  width: 52%;
  transform: rotate(1.8deg);
  z-index: 2;
}
.img-accent::after { transform: translateX(-50%) rotate(2.4deg); }
.about-text .section-title { max-width: 480px; }
#aboutText { white-space: pre-line; }

/* ==========================================================================
   The carte (preview band + full page): printed on the flyer wall
   ========================================================================== */
.menu-tabs { display: flex; justify-content: center; gap: 14px; margin-bottom: 40px; }
.menu-tabs button {
  font-family: var(--display);
  font-size: 17px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--paper-soft);
  background: none;
  border: 1.5px solid var(--paper-rule);
  padding: 10px 30px 9px;
  clip-path: polygon(3% 0%, 97% 2%, 100% 40%, 98% 100%, 3% 98%, 0% 55%);
  transition: color 0.25s ease, background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.menu-tabs button:hover { color: var(--paper-ink); border-color: var(--paper-ink); }
.menu-tabs button.active {
  color: var(--chalk);
  background: var(--paper-ink);
  border-color: var(--paper-ink);
  transform: rotate(-1deg);
}

.menu-cols {
  columns: 2;
  column-gap: 64px;
}
.menu-cat { break-inside: avoid; margin-bottom: 46px; }
.cat-head { text-align: center; margin-bottom: 18px; }
.cat-head h3 {
  font-size: 26px; font-weight: 800;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--paper-ink);
}
/* one rule under the whole head, segmented like the meter line */
.cat-head::after {
  content: '';
  display: block;
  height: 3px;
  margin: 12px auto 0;
  width: 120px;
  background: repeating-linear-gradient(90deg, var(--paper-ink) 0 8px, transparent 8px 13px);
}
.menu-cat-sub {
  font-size: 13px; font-style: italic;
  color: var(--paper-soft);
  margin: 6px auto 0; max-width: 46ch;
}
.menu-item {
  display: flex; align-items: baseline; gap: 8px;
  padding: 5.5px 0;
}
.mi-name {
  font-family: var(--display);
  font-size: 17.5px; font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--paper-ink);
}
.mi-dots { flex: 1; border-bottom: 1.5px dotted var(--paper-rule); transform: translateY(-4px); }
.mi-price {
  font-family: var(--display);
  font-size: 17px; font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--paper-accent);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.mi-was { font-size: 12.5px; color: var(--paper-soft); margin-right: 7px; }
.mi-deal { color: var(--paper-accent); }
.menu-item-desc {
  font-size: 13px;
  color: var(--paper-soft);
  margin: -2px 0 8px;
  max-width: 52ch;
}
.menu-actions { text-align: center; margin-top: 26px; }

/* two price columns when a category sells two ways (verre / bouteille) */
.menu-cat.two-way .mi-price { width: 4.6em; text-align: right; }
.menu-cat.two-way .mi-price.alt { width: 4.6em; }
.menu-item.mi-head { padding: 0 0 4px; border-bottom: 1.5px solid var(--paper-rule); margin-bottom: 5px; }
.menu-item.mi-head .mi-price {
  font-family: var(--sans);
  font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--paper-soft);
}

.promo-notice {
  text-align: center;
  font-weight: 600;
  color: var(--paper-accent);
  background: rgba(179, 19, 79, 0.07);
  border: 1.5px dashed var(--paper-accent);
  max-width: 640px;
  margin: 0 auto 36px;
  padding: 12px 22px;
}

/* the carte page proper */
.page-hero {
  position: relative;
  min-height: 46vh;
  display: grid; place-items: center; text-align: center;
  padding: calc(var(--promo-h) + 140px) 24px 70px;
  overflow: hidden;
}
.page-hero .hero-bg::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(10, 10, 12, 0.66), rgba(10, 10, 12, 0.5) 55%, rgba(10, 10, 12, 0.92)),
    radial-gradient(ellipse 50% 45% at 20% 0%, var(--violet-soft), transparent 70%);
}
.page-hero h1 {
  position: relative; z-index: 2;
  font-size: clamp(52px, 8vw, 96px);
  font-weight: 800; text-transform: uppercase;
  color: var(--chalk);
}
.page-hero .kicker { position: relative; z-index: 2; }
.menu-page { padding-top: 84px; }

.carte-lang { display: flex; justify-content: center; gap: 0; margin: -18px 0 44px; }
.carte-lang button {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--paper-soft);
  background: none;
  border: 1.5px solid var(--paper-rule);
  border-right-width: 0;
  padding: 8px 18px;
  transition: color 0.2s ease, background 0.2s ease;
}
.carte-lang button:last-child { border-right-width: 1.5px; }
.carte-lang button:hover { color: var(--paper-ink); }
.carte-lang button.active { background: var(--paper-ink); border-color: var(--paper-ink); color: var(--chalk); }

/* ==========================================================================
   The assortiments band: the setlist. Richest thing on the page, and the
   one place the neon is allowed to pour.
   ========================================================================== */
.formule {
  background:
    radial-gradient(ellipse 52% 60% at 82% 8%, rgba(255, 61, 122, 0.18), transparent 65%),
    radial-gradient(ellipse 44% 52% at 10% 96%, rgba(139, 121, 255, 0.16), transparent 70%),
    var(--ink-2);
}
.formule-inner {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 72px;
  align-items: center;
}
.formule-copy .section-title { font-size: clamp(38px, 4.6vw, 54px); }
.formule-time {
  font-family: var(--marker);
  font-size: 17px;
  color: var(--neon);
  margin-bottom: 14px;
}
.formule-copy p:not(.kicker):not(.formule-time) { margin-bottom: 28px; }

/* the setlist sheet: a case-panel page taped up, titles run large */
.formule-list {
  position: relative;
  background: var(--case);
  border: 1px solid var(--line-soft);
  padding: 40px 36px 34px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5);
  transform: rotate(0.8deg);
}
.formule-list::before {
  content: 'SETLIST';
  position: absolute; top: -15px; left: 30px;
  font-family: var(--sans);
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.34em; text-indent: 0.34em;
  color: var(--ink);
  background: var(--chalk);
  padding: 6px 16px 5px;
  transform: rotate(-2deg);
  clip-path: polygon(2% 0%, 98% 4%, 100% 55%, 98% 100%, 1% 94%, 0% 40%);
}
.fm-row { display: flex; align-items: baseline; gap: 10px; padding: 11px 0; }
.fm-row + .fm-row { border-top: 1px dashed var(--line-soft); }
.fm-name {
  font-family: var(--display);
  font-size: 21px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--chalk);
}
.fm-dots { flex: 1; border-bottom: 1.5px dotted var(--line); transform: translateY(-4px); }
.fm-price {
  font-family: var(--display);
  font-size: 21px; font-weight: 800;
  color: var(--neon);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   The programme: seven nights on one rack
   ========================================================================== */
.programme-section { background: var(--ink); }
.programme-section::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 70% 34% at 50% 102%, var(--violet-soft), transparent 72%);
}
.programme-grid {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-left: 1px solid var(--line-soft);
}
.prog-day {
  border-right: 1px solid var(--line-soft);
  padding: 26px 16px 22px;
  display: flex; flex-direction: column; gap: 8px;
  min-height: 190px;
  transition: background 0.3s ease;
}
.prog-day:hover { background: rgba(242, 239, 233, 0.025); }
.prog-name {
  font-family: var(--display);
  font-size: 19px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--chalk);
}
.prog-hours { font-size: 12px; color: var(--para); font-variant-numeric: tabular-nums; }
.prog-note {
  margin-top: auto;
  font-family: var(--marker);
  font-size: 15.5px;
  line-height: 1.4;
  color: rgba(242, 239, 233, 0.85);
  transform: rotate(-1.2deg);
}
.prog-day.closed-day .prog-name, .prog-day.closed .prog-name { color: var(--faint); }
.prog-day.closed-day .prog-hours, .prog-day.closed .prog-hours { color: var(--faint); }
/* tonight: the ON AIR column */
.prog-day.today {
  background: linear-gradient(180deg, rgba(255, 61, 122, 0.08), transparent 70%);
  box-shadow: inset 0 3px 0 var(--neon);
}
.prog-day.today .prog-name { color: var(--neon); }
.prog-day.today .prog-name::after {
  content: '';
  display: inline-block;
  width: 7px; height: 7px;
  margin-left: 8px;
  border-radius: 50%;
  background: var(--neon);
  box-shadow: 0 0 10px var(--neon);
  animation: onair 1.6s ease-in-out infinite;
  vertical-align: 2px;
}
@keyframes onair { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
.prog-day.today .prog-note { color: var(--neon); }

/* ==========================================================================
   Spaces: three rooms, three frames
   ========================================================================== */
.spaces-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.space-card {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--case);
  margin: 0;
}
.space-card img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.8s var(--ease), filter 0.5s ease;
}
.space-card:hover img { transform: scale(1.05); }
.space-card figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 44px 22px 18px;
  background: linear-gradient(180deg, transparent, rgba(6, 6, 7, 0.88));
  display: flex; flex-direction: column;
}
.space-card figcaption span {
  font-family: var(--display);
  font-size: 24px; font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--chalk);
}
.space-card figcaption small { font-size: 12.5px; color: var(--para); letter-spacing: 0.06em; }
/* the neon strikes the sill of the frame you are looking at */
.space-card::after {
  content: '';
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 3px;
  background: repeating-linear-gradient(90deg, var(--neon) 0 9px, transparent 9px 15px);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s var(--ease);
}
.space-card:hover::after { transform: scaleX(1); }

/* ==========================================================================
   Gallery: an edit, not a belt. Lead takes four cells of a 3x3.
   ========================================================================== */
.gallery-section { background: var(--ink-2); }
.gallery-section::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 60% 30% at 50% 100%, rgba(255, 61, 122, 0.05), transparent 70%);
}
.gal-grid {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(180px, 22vw);
  gap: 16px;
}
.gal-grid figure {
  overflow: hidden;
  cursor: pointer;
  position: relative;
  background: var(--case);
  margin: 0;
}
.gal-grid figure:first-child { grid-column: span 2; grid-row: span 2; }
.gal-grid img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.7s var(--ease), filter 0.5s ease;
}
.gal-grid figure:hover img { transform: scale(1.055); }
.gal-grid figure::after {
  content: '+';
  position: absolute; right: 14px; bottom: 10px;
  font-family: var(--display);
  font-size: 26px; font-weight: 600;
  color: var(--chalk);
  opacity: 0;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8);
  transition: opacity 0.3s ease;
}
.gal-grid figure:hover::after { opacity: 1; }

.lightbox {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  background: rgba(6, 6, 7, 0.94);
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease;
}
.lightbox.open { opacity: 1; pointer-events: auto; }
.lightbox img {
  max-width: min(1400px, 92vw); max-height: 86vh;
  object-fit: contain;
  border: 8px solid var(--chalk);
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.8);
}
.lb-close, .lb-prev, .lb-next {
  position: absolute;
  background: none; border: 1px solid var(--line);
  color: var(--chalk);
  font-size: 22px; line-height: 1;
  width: 48px; height: 48px;
  border-radius: 50%;
  transition: border-color 0.25s ease, color 0.25s ease, background 0.25s ease;
  z-index: 2;
}
.lb-close:hover, .lb-prev:hover, .lb-next:hover { border-color: var(--neon); color: var(--neon); }
.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 & address: the second printed band
   ========================================================================== */
.info-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px;
  align-items: start;
}
.info-grid.no-map { grid-template-columns: 1fr; max-width: 640px; }
.hours-list { list-style: none; margin-bottom: 34px; }
.hours-list li {
  display: flex; align-items: baseline; gap: 10px;
  padding: 10px 0;
}
.hours-list li + li { border-top: 1px solid rgba(23, 20, 28, 0.12); }
.day-col { display: flex; flex-direction: column; }
.day {
  font-family: var(--display);
  font-size: 19px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--paper-ink);
}
.day-note { font-family: var(--marker); font-size: 14px; color: var(--paper-accent); }
.hours-list .dots { flex: 1; border-bottom: 1.5px dotted var(--paper-rule); transform: translateY(-4px); }
.hours-list .time {
  font-family: var(--display);
  font-size: 18px; font-weight: 700;
  color: var(--paper-ink);
  font-variant-numeric: tabular-nums;
}
.hours-list .closed {
  font-family: var(--marker);
  font-size: 15px;
  color: var(--paper-accent);
}
.contact-lines div { padding: 5px 0; color: var(--paper-soft); }
.contact-lines strong { color: var(--paper-ink); }
.contact-lines a { color: var(--paper-ink); text-decoration: underline; text-decoration-color: var(--paper-rule); text-underline-offset: 3px; }
.contact-lines a:hover { color: var(--paper-accent); }

#map {
  height: 420px;
  border: 10px solid var(--chalk);
  box-shadow: 0 20px 50px rgba(23, 20, 28, 0.25);
  filter: saturate(0.85);
  z-index: 1;
}
.map-pin {
  width: 22px; height: 22px;
  background: var(--neon);
  border: 3px solid var(--chalk);
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(255, 61, 122, 0.35), 0 4px 12px rgba(0, 0, 0, 0.4);
}
.leaflet-popup-content-wrapper { border-radius: 4px; font-family: var(--sans); }

/* ==========================================================================
   Contact band: the stage door
   ========================================================================== */
.contact-band {
  position: relative;
  padding: 110px 0;
  overflow: hidden;
  background: url('/images/contact-bg.jpg') center / cover no-repeat fixed;
  text-align: center;
}
.contact-band::before {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(6, 6, 7, 0.9), rgba(6, 6, 7, 0.78) 50%, rgba(6, 6, 7, 0.92)),
    radial-gradient(ellipse 50% 60% at 50% 0%, var(--violet-soft), transparent 70%);
}
.contact-inner { position: relative; z-index: 1; }
.contact-lead { margin: 0 auto 44px; max-width: 520px; color: var(--para); }
.contact-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  max-width: 980px;
  margin: 0 auto 44px;
}
.contact-card {
  display: flex; align-items: center; gap: 14px;
  text-align: left;
  background: rgba(20, 19, 24, 0.82);
  border: 1px solid var(--line-soft);
  padding: 18px 20px;
  transition: transform 0.3s var(--ease), border-color 0.3s ease, background 0.3s ease;
}
.contact-card:hover { transform: translateY(-4px); border-color: var(--neon); background: rgba(20, 19, 24, 0.95); color: inherit; }
.cc-icon { flex: none; width: 22px; height: 22px; }
.cc-icon svg { width: 100%; height: 100%; fill: var(--neon); }
.cc-body { display: flex; flex-direction: column; min-width: 0; }
.cc-body small {
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--faint);
}
.cc-body b {
  font-weight: 500; font-size: 13.5px;
  color: var(--chalk);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.contact-actions { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; margin-bottom: 40px; }
.socials { display: flex; gap: 14px; justify-content: center; }
.socials a {
  display: grid; place-items: center;
  width: 46px; height: 46px;
  background: rgba(242, 239, 233, 0.06);
  border: 1px solid var(--line-soft);
  border-radius: 50%;
  transition: transform 0.3s var(--ease), border-color 0.3s ease, box-shadow 0.3s ease;
}
.socials a:hover { transform: translateY(-3px) rotate(-4deg); border-color: var(--neon); box-shadow: 0 6px 18px rgba(255, 61, 122, 0.2); }
.socials img { width: 26px; height: 26px; object-fit: contain; }

/* ==========================================================================
   Booking: the guest list
   ========================================================================== */
.reserve-section { background: var(--ink-2); padding-bottom: 130px; }
.reserve-section::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 46% 42% at 92% 100%, rgba(255, 61, 122, 0.07), transparent 70%);
}
.reserve-panel {
  position: relative; z-index: 1;
  max-width: 760px;
  margin: 0 auto;
  background: var(--case);
  border: 1px solid var(--line-soft);
  padding: 56px 58px 48px;
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.5);
}
/* the pass clipped to the top of the sheet */
.reserve-panel::before {
  content: 'GUEST LIST';
  position: absolute; top: -15px; right: 44px;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.32em; text-indent: 0.32em;
  color: var(--ink);
  background: var(--chalk);
  padding: 6px 16px 5px;
  transform: rotate(2deg);
  clip-path: polygon(1% 6%, 99% 0%, 100% 50%, 98% 100%, 2% 95%, 0% 45%);
}
.reserve-panel .section-head { margin-bottom: 38px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 22px; }
.form-field { display: flex; flex-direction: column; gap: 8px; }
.form-field.full { grid-column: 1 / -1; }
.form-field label {
  font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.2em; text-indent: 0.2em; text-transform: uppercase;
  color: var(--para);
}
.form-field input, .form-field select, .timepick-btn {
  background: var(--ink);
  border: 1px solid var(--line);
  color: var(--chalk);
  font-size: 15px;
  padding: 13px 16px;
  border-radius: 3px;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
  width: 100%;
}
.form-field input:focus, .form-field select:focus, .timepick-btn:focus {
  outline: none;
  border-color: var(--neon);
  box-shadow: 0 0 0 3px var(--neon-soft);
}
.form-field input::placeholder { color: var(--faint); }
.form-field select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--para) 50%), linear-gradient(135deg, var(--para) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size: 6px 6px;
  background-repeat: no-repeat;
}
input[type='date'] { color-scheme: dark; }
.field-note { font-size: 12px; color: var(--faint); }
.phone-row { display: grid; grid-template-columns: 128px 1fr; gap: 10px; }

.timepick { position: relative; }
.timepick-btn { display: flex; align-items: center; gap: 10px; text-align: left; }
.timepick-btn svg { width: 17px; height: 17px; fill: var(--para); flex: none; }
.timepick-btn .tp-caret {
  margin-left: auto;
  border: 5px solid transparent; border-top-color: var(--para);
  transform: translateY(3px);
  transition: transform 0.25s ease;
}
.timepick-btn.open .tp-caret { transform: translateY(-3px) rotate(180deg); }
.timepick-btn.chosen { color: var(--chalk); border-color: rgba(255, 61, 122, 0.5); }
/* display:grid would otherwise beat the [hidden] attribute's UA rule and the
   panel could never close */
.timepick-panel[hidden] { display: none !important; }
.timepick-panel {
  position: absolute; z-index: 30; top: calc(100% + 8px); left: 0; right: 0;
  max-height: 260px; overflow: auto;
  background: var(--case-2);
  border: 1px solid var(--line);
  border-radius: 4px;
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.6);
  display: grid; grid-template-columns: repeat(3, 1fr);
  padding: 8px; gap: 4px;
}
.timepick-slot {
  background: none; border: 1px solid transparent;
  color: var(--para);
  font-size: 13.5px; font-variant-numeric: tabular-nums;
  padding: 9px 4px;
  border-radius: 3px;
  transition: color 0.15s ease, background 0.15s ease;
}
.timepick-slot:hover { background: rgba(242, 239, 233, 0.07); color: var(--chalk); }
.timepick-slot.on { background: var(--neon); color: var(--ink); font-weight: 600; }

.form-submit { margin-top: 32px; text-align: center; }
.wa-btn svg { width: 17px; height: 17px; fill: currentColor; }
.form-msg { margin-top: 16px; text-align: center; font-size: 14px; min-height: 1.4em; color: #79dca0; }
.form-msg.err { color: #ff8080; }
.form-note { margin: 14px auto 0; text-align: center; font-size: 12.5px; color: var(--faint); max-width: 46ch; }
.prefill-note { margin-top: 12px; font-size: 13px; color: var(--neon); }

/* the toast: one line of news at the top of the window */
.toast {
  position: fixed; top: calc(var(--promo-h) + 14px); left: 50%; z-index: 300;
  transform: translate(-50%, -140%);
  display: flex; align-items: center; gap: 14px;
  background: var(--chalk);
  color: var(--ink);
  font-size: 14px; font-weight: 500;
  padding: 14px 20px;
  border-radius: 4px;
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.5);
  max-width: min(560px, calc(100vw - 40px));
  transition: transform 0.45s var(--ease);
}
.toast.show { transform: translate(-50%, 0); }
.toast.err { background: #3a1420; color: #ffc9d6; }
.toast-close { background: none; border: none; color: inherit; font-size: 15px; opacity: 0.6; }
.toast-close:hover { opacity: 1; }

/* ==========================================================================
   Footer: the load-out
   ========================================================================== */
footer {
  background: var(--ink-2);
  border-top: 1px solid var(--line-soft);
  padding: 70px 0 30px;
  position: relative;
}
footer::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 40% 60% at 4% 0%, var(--violet-soft), transparent 70%);
}
.footer-grid {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 3fr);
  gap: 56px;
  margin-bottom: 50px;
}
.footer-logo { width: 150px; margin-bottom: 20px; }
.footer-grid p { font-size: 14px; margin-bottom: 22px; }
.footer-grid h4 {
  font-size: 17px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  margin-bottom: 18px;
}
.footer-grid ul { list-style: none; }
.footer-grid li { padding: 5px 0; font-size: 14px; color: var(--para); }
.footer-grid li a { color: var(--para); }
.footer-grid li a:hover { color: var(--neon); }
.footer-grid .socials { justify-content: flex-start; }
.footer-bottom {
  position: relative; z-index: 1;
  display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  border-top: 1px solid var(--line-soft);
  padding-top: 24px;
  font-size: 12.5px;
  color: var(--faint);
}
.footer-bottom a { color: var(--faint); }
.footer-bottom a:hover { color: var(--neon); }

/* ==========================================================================
   Reveal choreography
   ========================================================================== */
.reveal, .reveal-left {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.reveal-left { transform: translateX(-30px); }
.reveal.visible, .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; }

/* ==========================================================================
   Account, deals, legal: the same room, quieter
   ========================================================================== */
.page-account {
  min-height: 100vh;
  background:
    linear-gradient(180deg, rgba(10, 10, 12, 0.9), rgba(10, 10, 12, 0.96)),
    url('/images/account-bg.jpg') center / cover no-repeat fixed;
}
.account-main, .deals-main {
  padding: calc(var(--promo-h) + 140px) 0 100px;
  min-height: 80vh;
}
.auth-wrap { max-width: 460px; margin: 0 auto; }
.auth-card {
  background: var(--case);
  border: 1px solid var(--line-soft);
  padding: 44px 42px 38px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5);
}
.auth-logo { width: 92px; margin: 0 auto 18px; display: block; }
.auth-card h1, .auth-card h2 { font-size: 30px; text-transform: uppercase; letter-spacing: 0.05em; text-align: center; margin-bottom: 8px; }
.auth-sub { text-align: center; font-size: 13.5px; margin: 0 auto 26px; }
.auth-form { display: flex; flex-direction: column; gap: 16px; }
.auth-form .form-field input, .auth-form input, .auth-form select {
  background: var(--ink);
  border: 1px solid var(--line);
  color: var(--chalk);
  font-size: 15px;
  padding: 13px 16px;
  border-radius: 3px;
  width: 100%;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.auth-form input:focus, .auth-form select:focus {
  outline: none;
  border-color: var(--neon);
  box-shadow: 0 0 0 3px var(--neon-soft);
}
.auth-form label {
  font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.2em; text-indent: 0.2em; text-transform: uppercase;
  color: var(--para);
  display: block; margin-bottom: 7px;
}
.auth-form .btn { width: 100%; }
.auth-msg { min-height: 1.3em; font-size: 13.5px; text-align: center; color: #79dca0; }
.auth-msg.err { color: #ff8080; }
.auth-hint { font-size: 12px; color: var(--faint); }
.auth-switch { text-align: center; font-size: 13.5px; margin-top: 18px; }
.auth-switch a { color: var(--neon); }
.forgot-link { font-size: 12.5px; color: var(--faint); text-align: right; display: block; }
.forgot-link:hover { color: var(--neon); }
.pw-wrap { position: relative; }
.pw-wrap input { width: 100%; padding-right: 46px; }
.pw-eye {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  background: none; border: none;
  width: 34px; height: 34px;
  display: grid; place-items: center;
}
.pw-eye svg { width: 19px; height: 19px; fill: var(--faint); }
.pw-eye:hover svg { fill: var(--chalk); }
.pw-eye .eye-shut { display: none; }
.pw-eye.shut .eye-open { display: none; }
.pw-eye.shut .eye-shut { display: block; }
.stay-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.stay-line { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--para); }
.stay-line input { accent-color: var(--neon); width: 16px; height: 16px; }
.gender-row { display: flex; gap: 8px; }
.gender-row button {
  flex: 1;
  background: var(--ink);
  border: 1px solid var(--line);
  color: var(--para);
  font-size: 13px;
  padding: 11px 6px;
  border-radius: 3px;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.gender-row button.active, .gender-row button.on { border-color: var(--neon); color: var(--chalk); background: var(--neon-soft); }
.birthday-note { font-size: 12px; color: var(--faint); }
.pending-title { font-family: var(--display); font-size: 26px; font-weight: 700; text-transform: uppercase; margin-bottom: 8px; color: var(--chalk); text-align: center; }

.member-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; max-width: 900px; margin: 0 auto; }
.member-heading { grid-column: 1 / -1; }
.member-card, .res-card, .del-card, .deal-card {
  background: var(--case);
  border: 1px solid var(--line-soft);
  padding: 28px 30px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.4);
}
.member-card h3 { font-size: 21px; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 10px; }
.res-list { display: flex; flex-direction: column; gap: 14px; }
.res-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 20px 24px; }
.res-when { font-family: var(--display); font-size: 19px; font-weight: 700; color: var(--chalk); }
.res-meta { font-size: 13px; color: var(--para); }
.res-badge {
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 20px;
  border: 1px solid var(--line);
  color: var(--para);
}
.res-badge.confirmed { border-color: rgba(121, 220, 160, 0.5); color: #79dca0; }
.res-badge.pending { border-color: rgba(232, 161, 61, 0.5); color: #e8a13d; }
.res-badge.cancelled { border-color: rgba(255, 128, 128, 0.4); color: #ff8080; }

.del-block { max-width: 640px; margin: 0 auto; }
.del-card { margin-bottom: 22px; }
.del-card h2 { font-size: 22px; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 12px; }
.del-list { list-style: none; }
.del-list li { padding: 6px 0 6px 24px; position: relative; font-size: 14px; }
.del-list li::before { content: '–'; position: absolute; left: 4px; color: var(--neon); }
.del-note { font-size: 13px; color: var(--faint); margin-top: 12px; }
.del-or { text-align: center; margin: 18px 0; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--faint); }

/* the boot veil while the account page decides who you are */
.page-boot {
  position: fixed; inset: 0; z-index: 400;
  display: grid; place-items: center;
  background: var(--ink);
  transition: opacity 0.3s ease;
}
.page-boot.gone { opacity: 0; pointer-events: none; }
.boot-mark { position: relative; width: 128px; height: 128px; display: grid; place-items: center; }
.boot-mark img { width: 84px; height: auto; }
.boot-ring {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 2px solid var(--line-soft);
  border-top-color: var(--neon);
  animation: bootSpin 1s linear infinite;
}
@keyframes bootSpin { to { transform: rotate(360deg); } }

/* legal pages */
.legal { max-width: 760px; margin: 0 auto; padding: calc(var(--promo-h) + 140px) 24px 100px; }
.legal h1 { font-size: clamp(36px, 5vw, 52px); text-transform: uppercase; margin-bottom: 26px; }
.legal h2 { font-size: 22px; text-transform: uppercase; letter-spacing: 0.05em; margin: 34px 0 12px; color: var(--chalk); }
.legal p, .legal li { font-size: 14.5px; color: var(--para); }
.legal ul { padding-left: 22px; margin: 10px 0; }
.legal a { color: var(--neon); }

/* 404 */
.notfound {
  min-height: 100vh;
  display: grid; place-items: center; text-align: center;
  padding: 24px;
}
.notfound h1 { font-size: clamp(80px, 16vw, 180px); font-weight: 800; color: var(--chalk); }
.notfound p { margin: 10px auto 30px; }

/* ---------- Modes set by the panel ---------- */
.bookings-off .reserve-section,
.bookings-off .nav-cta,
.bookings-off .reserve-badge,
.bookings-off a[href$='#reserve'],
.bookings-off li:has(> a[href$='#reserve']) { display: none !important; }
.bookings-off .contact-actions .btn.ghost { margin: 0 auto; }

/* ==========================================================================
   Motion respect
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .reveal-left { opacity: 1; transform: none; transition: none; }
  .reserve-badge svg { animation: none; }
  .hero-bg img.kb { animation: none; }
  .prog-day.today .prog-name::after { animation: none; }
  .promo-track { animation-duration: 120s !important; }
  .boot-ring { animation-duration: 2.6s; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (min-width: 1500px) {
  .menu-cols { columns: 3; column-gap: 56px; }
}

@media (max-width: 1100px) {
  .side-rail { display: none; }
  .about-grid, .formule-inner { gap: 48px; }
  .contact-cards { grid-template-columns: repeat(2, 1fr); }
  .programme-grid { grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line-soft); }
  .prog-day { min-height: 160px; border-bottom: 1px solid var(--line-soft); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
}

@media (max-width: 900px) {
  .nav-right .lang-switch, .nav-auth { display: none; }
  .nav-links {
    position: fixed; inset: 0;
    background: rgba(6, 6, 7, 0.97);
    flex-direction: column; justify-content: center; align-items: center;
    gap: 10px;
    opacity: 0; pointer-events: none;
    transition: opacity 0.35s ease;
    z-index: 120;
  }
  .nav-links.open { opacity: 1; pointer-events: auto; }
  .nav-links a { font-size: 19px; letter-spacing: 0.22em; padding: 10px 0; }
  .nav-links a::after { display: none; }
  .nav-links li { opacity: 0; transform: translateY(14px); transition: opacity 0.4s ease, transform 0.4s var(--ease); }
  .nav-links.open li { opacity: 1; transform: none; }
  .nav-links.open li:nth-child(1) { transition-delay: 0.05s; }
  .nav-links.open li:nth-child(2) { transition-delay: 0.09s; }
  .nav-links.open li:nth-child(3) { transition-delay: 0.13s; }
  .nav-links.open li:nth-child(4) { transition-delay: 0.17s; }
  .nav-links.open li:nth-child(5) { transition-delay: 0.21s; }
  .nav-links.open li:nth-child(6) { transition-delay: 0.25s; }
  .nav-links.open li:nth-child(7) { transition-delay: 0.29s; }
  .nav-links.open li:nth-child(8) { transition-delay: 0.33s; }
  .nav-links.open li:nth-child(9) { transition-delay: 0.37s; }
  .nav-links.open li:nth-child(10) { transition-delay: 0.41s; }
  .burger { display: block; }
  .mobile-only { display: block; }
  .nav-simple .nav-links {
    position: static; background: none; flex-direction: row;
    opacity: 1; pointer-events: auto;
  }
  .nav-simple .nav-links li { opacity: 1; transform: none; }
  .nav-simple .nav-links a { font-size: 11px; letter-spacing: 0.16em; }

  .about-grid { grid-template-columns: 1fr; }
  .about-images { min-height: 0; margin-bottom: 40px; }
  .img-main { width: 84%; }
  .img-accent { bottom: -26px; }
  .formule-inner { grid-template-columns: 1fr; }
  .formule-list { transform: none; }
  .spaces-grid { grid-template-columns: 1fr; }
  .info-grid { grid-template-columns: 1fr; gap: 44px; }
  .member-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 36px; }
  .menu-cols { columns: 1; }
  .reserve-panel { padding: 44px 28px 40px; }
  section { padding: 84px 0; }
}

@media (max-width: 700px) {
  body { font-size: 15px; }
  .hero { padding-top: calc(var(--promo-h) + 100px); }
  .hero-actions .btn { width: 100%; max-width: 320px; }
  .programme-grid { grid-template-columns: repeat(2, 1fr); }
  .prog-day { min-height: 130px; }
  .contact-cards { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .reserve-badge { width: 92px; height: 92px; right: 18px; bottom: 18px; }
  .badge-center { width: 52px; height: 52px; }
  .badge-center img { width: 36px; height: 36px; }
  .gal-grid { grid-auto-rows: minmax(130px, 30vw); gap: 10px; }
  .contact-band { background-attachment: scroll; }
  .paper { background-attachment: scroll; }
  .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; font-size: 15.5px; }
  .menu-cat.two-way .mi-dots { flex: 0 1 16px; min-width: 0; }
  .menu-cat.two-way .mi-price { flex: none; width: 3.4em; font-size: 15px; }
  .menu-cat.two-way .mi-price.alt { width: 4em; }
  .menu-cat.two-way .mi-head .mi-price { font-size: 8.5px; letter-spacing: 0.05em; }
  .auth-card { padding: 34px 22px 30px; }
  .lightbox img { border-width: 5px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}