/* La Grotte du Pêcheur.
   The room is a grotto: a vault of hand-sculpted white plaster over raspberry
   banquettes, washed in red neon once night falls. The site is built from
   those two materials. Plaster rooms (the stucco texture, lit from the top
   left like the real vault) and the dark of the cave lit by one neon red,
   with the stalactite edge where one hangs into the other. The navy anchor
   of the printed carte is the only other colour, and it is used sparingly.

   Bigshot One for the painted sign, Tilt Neon for anything that glows,
   Familjen Grotesk for everything said plainly. */

:root {
  --abyss: #120607;        /* the cave at night: the ground */
  --abyss-2: #1c0a0c;      /* a step up */
  --abyss-3: #2a0f13;      /* cards in the dark */
  --plaster: #f3ebe6;      /* the vault */
  --plaster-2: #e7dbd4;    /* plaster in its own shadow */
  --ink: #1d0b0e;          /* type on plaster */
  --ink-para: #4f3438;
  --neon: #ff3347;         /* the tube itself: rules, glows, fills */
  --neon-text: #ff8a93;    /* red that can be read on the dark */
  --rasp: #b8134a;         /* the banquettes: red that can be read on plaster */
  --rasp-deep: #8e0d38;
  --anchor: #2f3f96;       /* the anchor on the printed carte */
  --anchor-light: #9aa6ee;
  --foam: #f6ece6;         /* type on the dark */
  --para: #cdb8b4;
  --line: rgba(255, 51, 71, 0.34);
  --line-soft: rgba(246, 236, 230, 0.12);
  --line-ink: rgba(29, 11, 14, 0.16);
  --glow: 0 0 6px rgba(255, 51, 71, 0.9), 0 0 18px rgba(255, 51, 71, 0.55), 0 0 42px rgba(255, 51, 71, 0.35);
  --glow-soft: 0 0 10px rgba(255, 51, 71, 0.45);
  --sans: 'Familjen Grotesk', 'Segoe UI', system-ui, sans-serif;
  --display: 'Bigshot One', Georgia, serif;
  --neonf: 'Tilt Neon', 'Familjen Grotesk', system-ui, sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --swell: cubic-bezier(0.45, 0, 0.2, 1);
  --stucco: linear-gradient(rgba(243, 235, 230, 0.7), rgba(243, 235, 230, 0.7)), url('/images/stucco.jpg') 0 0 / 512px 512px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--abyss); }
body {
  background: var(--abyss);
  color: var(--para);
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.68;
  -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(--neon); color: #fff; }
:focus-visible { outline: 2px solid var(--neon); outline-offset: 3px; }

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

.kicker {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--neonf); font-size: 13px;
  letter-spacing: 0.32em; text-transform: uppercase; color: var(--neon-text);
}
/* A short lit tube before the label */
.kicker::before { content: ''; width: 26px; height: 2px; border-radius: 2px; background: var(--neon); box-shadow: var(--glow-soft); flex: none; }
.section-head.center .kicker { justify-content: center; }

.section-title { font-size: clamp(42px, 5.8vw, 84px); margin: 14px 0 20px; letter-spacing: -0.005em; }
/* The lit word. Tilt Neon in the tube's red; on the dark it glows and flickers
   on once the title is on screen, on plaster it reads as carved. */
.t-script {
  font-family: var(--neonf); font-style: normal; font-weight: 400;
  font-size: 0.92em; letter-spacing: 0.01em;
  color: #ff5a6a;
  text-shadow: var(--glow);
}
.reveal .t-script { opacity: 0.15; text-shadow: none; }
.reveal.visible .t-script, .visible .t-script { animation: neonOn 1.4s steps(1, end) 0.25s forwards; }
@keyframes neonOn {
  0% { opacity: 0.15; text-shadow: none; }
  10% { opacity: 1; text-shadow: var(--glow); }
  16% { opacity: 0.3; text-shadow: none; }
  26% { opacity: 1; text-shadow: var(--glow); }
  32% { opacity: 0.5; text-shadow: none; }
  44%, 100% { opacity: 1; text-shadow: var(--glow); }
}
.section-sub { color: var(--para); max-width: 560px; font-size: 16.5px; }

/* ---------- Layout ---------- */
.container { width: min(1200px, 90vw); margin: 0 auto; }
section { padding: clamp(96px, 11vw, 160px) 0; position: relative; }
.section-head { margin-bottom: clamp(38px, 5vw, 70px); }
.section-head.center { text-align: center; }
.section-head.center .section-sub { margin: 0 auto; }

/* Plaster rooms. The vault hangs into the dark below as a ragged edge of the
   same plaster, and rises from the dark above the same way. */
.plaster { background: var(--stucco); color: var(--ink-para); z-index: 1; }
.plaster::before, .plaster::after {
  content: ''; position: absolute; left: 0; right: 0; height: 56px; pointer-events: none;
  background: var(--stucco);
  -webkit-mask: url('/images/drip.svg') 0 0 / 100% 100% no-repeat;
          mask: url('/images/drip.svg') 0 0 / 100% 100% no-repeat;
}
.plaster::after { top: calc(100% - 1px); }
.plaster::before { bottom: calc(100% - 1px); transform: scale(-1, -1); }
.plaster.no-top::before, .plaster.no-bottom::after { display: none; }
.plaster h1, .plaster h2, .plaster h3 { color: var(--ink); }
.plaster .kicker { color: var(--rasp); }
.plaster .kicker::before { background: var(--rasp); box-shadow: none; }
.plaster .t-script {
  color: var(--rasp);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7), 0 -1px 0 rgba(90, 10, 30, 0.18);
}
.plaster .reveal .t-script { opacity: 0; transform: translateY(0.12em); transition: opacity 0.9s var(--ease) 0.3s, transform 0.9s var(--ease) 0.3s; }
.plaster .reveal.visible .t-script, .plaster .visible .t-script { animation: none; opacity: 1; transform: none; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7), 0 -1px 0 rgba(90, 10, 30, 0.18); }
.plaster .section-sub { color: var(--ink-para); }

/* ---------- Buttons ---------- */
/* Outlined pills. Hover lights the tube: the fill comes on and the edge glows. */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 32px; min-height: 50px;
  border: 1.5px solid var(--neon); border-radius: 999px;
  color: var(--foam); background: transparent;
  font-family: var(--neonf); font-size: 14px; letter-spacing: 0.2em; text-transform: uppercase;
  transition: background 0.35s var(--ease), color 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
}
.btn:hover { background: var(--neon); color: #fff; box-shadow: 0 0 22px rgba(255, 51, 71, 0.55); }
.btn.solid { background: var(--neon); color: #fff; box-shadow: 0 0 18px rgba(255, 51, 71, 0.4); }
.btn.solid:hover { background: #ff4b5d; box-shadow: 0 0 30px rgba(255, 51, 71, 0.7); }
.btn.ghost { border-color: rgba(246, 236, 230, 0.45); }
.btn.ghost:hover { border-color: var(--neon); }
.btn:disabled { opacity: 0.5; pointer-events: none; }
.plaster .btn { color: var(--ink); border-color: var(--rasp); }
.plaster .btn:hover { background: var(--rasp); color: #fff; box-shadow: none; }
.plaster .btn.solid { background: var(--rasp); color: #fff; box-shadow: none; }
.plaster .btn.solid:hover { background: var(--rasp-deep); }

/* ---------- Nav ---------- */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 60; padding: 18px 0; transition: background 0.45s, padding 0.45s, box-shadow 0.45s; }
.nav.scrolled {
  background: rgba(18, 6, 7, 0.9); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  padding: 10px 0; box-shadow: 0 1px 0 var(--line);
}
.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: 28px; }
.nav-logo { grid-column: 1; grid-row: 1; display: flex; align-items: center; }
.nav-logo img { height: 40px; width: auto; transition: height 0.35s var(--ease); }
.nav.scrolled .nav-logo img { height: 33px; }
.nav-links { display: flex; gap: 24px; align-items: center; justify-content: center; list-style: none; grid-column: 2; grid-row: 1; }
.nav-right { display: flex; gap: 12px; align-items: center; justify-content: flex-end; grid-column: 3; grid-row: 1; list-style: none; }
.nav-links a, .nav-right a {
  font-family: var(--neonf); font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--foam); position: relative; padding: 6px 0; transition: color 0.3s, text-shadow 0.3s;
}
.nav-links a:hover { color: #ff6b79; text-shadow: var(--glow-soft); }
.nav-links > li > a, .nav-right > li > a { white-space: nowrap; }
.nav-cta { border: 1.5px solid var(--neon); border-radius: 999px; padding: 10px 20px !important; box-shadow: var(--glow-soft); }
.nav-cta:hover { background: var(--neon); color: #fff !important; }

.lang-switch { position: relative; display: flex; padding: 3px; border: 1px solid var(--line-soft); border-radius: 999px; }
.lang-switch::before {
  content: ''; position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px);
  background: var(--neon); border-radius: 999px; transition: transform 0.35s var(--ease);
  box-shadow: var(--glow-soft);
}
.lang-switch.on-fr::before { transform: translateX(100%); }
.lang-switch button {
  position: relative; z-index: 1; background: transparent; border: 0; color: var(--para);
  font-family: var(--neonf); font-size: 12px; letter-spacing: 0.12em; padding: 6px 13px; border-radius: 999px; 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: 2px; border-radius: 2px; background: var(--foam); transition: 0.35s var(--ease); }
.burger span:nth-child(1) { top: 0; }
.burger span:nth-child(2) { top: 10px; width: 64%; background: var(--neon); box-shadow: var(--glow-soft); }
.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); }

/* The booking pill: the anchor of the printed carte, swinging a little when
   the pill first appears (js/book-float.js) */
.book-float {
  position: fixed; right: clamp(16px, 2.4vw, 34px); bottom: clamp(16px, 2.4vw, 30px); z-index: 55;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 22px 11px 16px; border-radius: 999px;
  background: rgba(18, 6, 7, 0.88); border: 1.5px solid var(--neon); color: var(--foam);
  font-family: var(--neonf); font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase;
  box-shadow: var(--glow-soft);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  opacity: 0; transform: translateY(14px); pointer-events: none;
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease), background 0.3s;
}
.book-float.on { opacity: 1; transform: none; pointer-events: auto; }
.book-float:hover { background: var(--neon); }
.bf-anchor { width: 20px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transform-origin: 50% 8%; }
.book-float.on .bf-anchor { animation: sway 2.4s var(--swell) 0.2s 2; }
@keyframes sway { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(10deg); } 75% { transform: rotate(-8deg); } }

/* ---------- Hero: looking out of the grotto ---------- */
.hero { min-height: 100svh; position: relative; overflow: hidden; padding: 0; display: grid; align-items: center; }
.hero-bg { position: absolute; inset: 0; background: var(--abyss); }
.hero-bg video, .hero-bg img { width: 100%; height: 100%; object-fit: cover; }
.hero-bg img.kb { animation: kenburns 24s var(--ease) infinite alternate; }
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.08); } }
/* The sea seen from inside: the cave's red light multiplied over the film,
   dark at the walls, and the bottom of the frame sinking into the page */
.hero-bg::before { content: ''; position: absolute; inset: 0; z-index: 1; background: #7a0a1c; mix-blend-mode: multiply; opacity: 0.42; }
.hero-bg::after {
  content: ''; position: absolute; inset: 0; z-index: 2;
  background:
    radial-gradient(70% 80% at 72% 45%, transparent 30%, rgba(18, 6, 7, 0.7) 100%),
    linear-gradient(90deg, rgba(18, 6, 7, 0.82), rgba(18, 6, 7, 0.25) 55%, transparent),
    linear-gradient(180deg, rgba(18, 6, 7, 0.55), transparent 22%, transparent 70%, var(--abyss));
}
.hero-inner {
  position: relative; z-index: 3; width: min(1280px, 90vw); margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: clamp(30px, 5vw, 80px); align-items: center;
  padding: 120px 0 130px;
}
.hero-content { display: grid; justify-items: start; }
.hero-logo { width: clamp(260px, 34vw, 520px); height: auto; filter: drop-shadow(0 4px 22px rgba(18, 6, 7, 0.7)); }
.hero-tag {
  margin-top: 22px; font-family: var(--neonf); font-size: clamp(13px, 1.2vw, 16px);
  letter-spacing: 0.42em; text-transform: uppercase; color: #ff6b79; text-shadow: var(--glow-soft);
}
.hero-script {
  margin-top: 18px; font-family: var(--display); font-weight: 400;
  font-size: clamp(30px, 3.4vw, 52px); line-height: 1.08; color: var(--foam);
  text-wrap: balance; max-width: 17ch; text-shadow: 0 2px 26px rgba(18, 6, 7, 0.7);
}
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 38px; }
.hero-content > * { opacity: 0; animation: heroIn 1.2s var(--ease) forwards; }
.hero-content > *:nth-child(1) { animation-name: logoIn; animation-duration: 1.8s; }
.hero-content > *:nth-child(2) { animation-delay: 0.6s; animation-name: neonIn; animation-duration: 1.6s; animation-timing-function: steps(1, end); }
.hero-content > *:nth-child(3) { animation-delay: 0.8s; }
.hero-content > *:nth-child(4) { animation-delay: 1.05s; }
@keyframes heroIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes logoIn { from { opacity: 0; transform: translateY(10px); filter: blur(10px); } to { opacity: 1; transform: none; filter: drop-shadow(0 4px 22px rgba(18, 6, 7, 0.7)); } }
@keyframes neonIn { 0% { opacity: 0; } 12% { opacity: 1; } 20% { opacity: 0.2; } 30% { opacity: 1; } 36% { opacity: 0.4; } 48%, 100% { opacity: 1; } }

/* The niche: the room itself, tonight, cut into the rock like an alcove */
.hero-niche {
  justify-self: end; width: min(330px, 100%); position: relative;
  opacity: 0; animation: heroIn 1.4s var(--ease) 1.2s forwards;
}
.niche-frame {
  position: relative; aspect-ratio: 9 / 15; overflow: hidden;
  border-radius: 999px 999px 26px 26px;
  border: 1.5px solid rgba(255, 51, 71, 0.75);
  box-shadow: 0 0 0 6px rgba(18, 6, 7, 0.35), 0 0 34px rgba(255, 51, 71, 0.35), 0 30px 70px rgba(0, 0, 0, 0.55);
  background: var(--abyss-2);
}
.niche-frame video, .niche-frame img { width: 100%; height: 100%; object-fit: cover; }
.niche-frame::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(18, 6, 7, 0.85)); }
.niche-cap { position: absolute; left: 0; right: 0; bottom: 22px; z-index: 2; text-align: center; display: grid; gap: 4px; }
.niche-cap small { font-family: var(--neonf); font-size: 12px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--para); }
.open-sign {
  display: inline-flex; align-items: center; gap: 9px; justify-self: center;
  font-family: var(--neonf); font-size: 15px; letter-spacing: 0.12em; color: var(--foam);
}
.open-sign i { width: 9px; height: 9px; border-radius: 50%; background: #5d6066; flex: none; }
.open-sign.is-open i { background: #3ee07a; box-shadow: 0 0 8px #3ee07a, 0 0 18px rgba(62, 224, 122, 0.6); animation: blink 2.4s ease-in-out infinite; }
.open-sign.is-open { text-shadow: 0 0 10px rgba(255, 255, 255, 0.25); }
@keyframes blink { 50% { opacity: 0.55; } }

.hero-foot {
  position: absolute; z-index: 3; left: 0; right: 0; bottom: clamp(74px, 9vh, 96px);
  width: min(1280px, 90vw); margin: 0 auto;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  font-family: var(--neonf); font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--para);
}
.hero-hours { display: inline-flex; align-items: center; gap: 14px; }
.hero-hours b { font-family: var(--display); font-weight: 400; font-size: 22px; letter-spacing: 0.02em; color: var(--foam); text-transform: none; }
.hero-hours i { display: block; width: 56px; height: 2px; border-radius: 2px; background: var(--neon); box-shadow: var(--glow-soft); }
.hero-scroll { display: inline-flex; align-items: center; gap: 10px; }
.hero-scroll::after { content: ''; width: 1.5px; height: 34px; background: linear-gradient(var(--neon), transparent); animation: drop 2.2s var(--ease) infinite; }
@keyframes drop { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

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

/* ---------- About: two pebbles of the room set into the plaster ---------- */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(44px, 7vw, 110px); align-items: center; }
.about-images { position: relative; padding: 0 0 70px; }
.about-main {
  width: 76%; aspect-ratio: 4 / 5; overflow: hidden;
  border-radius: 46% 54% 42% 58% / 34% 38% 62% 66%;
  box-shadow: 0 30px 60px rgba(29, 11, 14, 0.22);
}
.about-main img, .about-second img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.about-main:hover img { transform: scale(1.05); }
.about-second {
  position: absolute; right: 0; bottom: 0; width: 46%; aspect-ratio: 1; overflow: hidden;
  border-radius: 58% 42% 55% 45% / 48% 56% 44% 52%;
  border: 6px solid var(--plaster);
  box-shadow: 0 0 0 1.5px var(--rasp), 0 24px 50px rgba(29, 11, 14, 0.25);
}
.about-text p { color: var(--ink-para); margin: 22px 0; font-size: 17px; max-width: 52ch; }
.about-sign { display: flex; align-items: center; gap: 16px; margin-top: 8px; }
.about-sign img { width: 190px; height: auto; }
.about-sign svg { width: 34px; height: 40px; fill: none; stroke: var(--anchor); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---------- Happy hours: the sign over the bar ---------- */
.afterwork { padding-block: clamp(110px, 11vw, 160px); overflow: hidden; }
.afterwork::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(50% 60% at 22% 40%, rgba(255, 51, 71, 0.14), transparent 70%);
}
.afterwork-inner { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 96px); align-items: center; }
.hh-sign {
  font-family: var(--neonf); font-size: clamp(56px, 8.6vw, 128px); line-height: 0.92; letter-spacing: 0.02em;
  color: #ffd9dc; text-transform: uppercase;
  text-shadow: 0 0 4px #fff, 0 0 12px var(--neon), 0 0 28px var(--neon), 0 0 60px rgba(255, 51, 71, 0.6);
  margin: 14px 0 10px;
}
.hh-sign { max-width: 5.6ch; animation: flicker 7s linear infinite; }
@keyframes flicker { 0%, 91%, 93%, 96%, 100% { opacity: 1; } 92%, 95% { opacity: 0.35; } }
.afterwork-time { font-family: var(--display); font-size: clamp(24px, 2.4vw, 32px); color: var(--foam); margin-bottom: 6px; }
.hh-count { font-family: var(--neonf); font-size: 15px; letter-spacing: 0.08em; color: var(--neon-text); min-height: 1.6em; margin-bottom: 14px; }
.afterwork-copy p:not(.afterwork-time):not(.hh-count) { color: var(--para); margin-bottom: 26px; max-width: 44ch; }
.afterwork-list {
  position: relative; padding: clamp(24px, 3vw, 40px);
  border: 1.5px solid rgba(255, 51, 71, 0.5); border-radius: 26px;
  background: linear-gradient(160deg, rgba(42, 15, 19, 0.9), rgba(18, 6, 7, 0.9));
  box-shadow: 0 0 40px rgba(255, 51, 71, 0.12), inset 0 0 30px rgba(255, 51, 71, 0.06);
}
.aw-row { display: flex; align-items: baseline; gap: 12px; padding: 10px 0; }
.aw-row + .aw-row { border-top: 1px solid var(--line-soft); }
.aw-name { font-size: 16.5px; color: var(--foam); }
.aw-dots { flex: 1; border-bottom: 1px dashed rgba(255, 51, 71, 0.3); transform: translateY(-5px); }
.aw-price { font-family: var(--neonf); font-size: 18px; color: #ff6b79; white-space: nowrap; text-shadow: var(--glow-soft); }
@media (max-width: 900px) { .afterwork-inner { grid-template-columns: 1fr; } }

/* ---------- The carte, carved into the plaster ---------- */
.menu-split { display: grid; grid-template-columns: minmax(260px, 0.72fr) 1.68fr; gap: clamp(40px, 6vw, 90px); align-items: start; }
.menu-aside { position: sticky; top: 120px; }
.menu-aside .section-sub { margin-bottom: 28px; }
.menu-tabs { display: flex; gap: 8px; margin-bottom: 28px; }
.menu-page .menu-tabs { justify-content: center; margin-bottom: 18px; }
.menu-tabs button {
  background: transparent; border: 1.5px solid var(--rasp); color: var(--ink); border-radius: 999px;
  padding: 11px 26px; font-family: var(--neonf); font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; transition: 0.35s;
}
.menu-tabs button:hover { background: rgba(184, 19, 74, 0.08); }
.menu-tabs button.active { color: #fff; background: var(--rasp); }
/* An alcove dug into the wall: the plaster in its own shadow, darker at the
   rim, a hairline of red where the light catches the edge */
.mirror {
  position: relative; border-radius: 30px;
  background:
    linear-gradient(rgba(231, 219, 212, 0.8), rgba(231, 219, 212, 0.8)),
    url('/images/stucco.jpg') 0 0 / 512px 512px;
  box-shadow: inset 0 14px 30px rgba(29, 11, 14, 0.14), inset 0 -2px 0 rgba(255, 255, 255, 0.6), 0 1px 0 rgba(255, 255, 255, 0.8);
  padding: clamp(28px, 4vw, 54px);
}
.menu-cols { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(30px, 3vw, 46px) clamp(32px, 4vw, 60px); align-items: start; }
@media (min-width: 1500px) {
  .menu-page .menu-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .menu-page .menu-item .mi-name { white-space: normal; }
}
.menu-cat h3 {
  font-family: var(--display); font-size: 30px; line-height: 1.1; color: var(--ink);
  margin-bottom: 8px; display: flex; align-items: center; gap: 14px;
}
.menu-cat h3::after { content: ''; flex: 1; height: 1.5px; background: linear-gradient(90deg, var(--rasp), transparent); transform: translateY(4px); opacity: 0.6; }
.menu-cat-sub { font-family: var(--neonf); font-size: 13px; letter-spacing: 0.1em; color: var(--rasp); margin: -2px 0 10px; }
.menu-item { display: flex; align-items: baseline; gap: 10px; padding: 6px 0; }
.menu-item .mi-name { font-size: 16px; color: var(--ink); white-space: nowrap; }
.menu-item .mi-dots { flex: 1; border-bottom: 1.5px dotted rgba(184, 19, 74, 0.35); transform: translateY(-5px); }
.menu-item .mi-price { font-family: var(--neonf); color: var(--rasp); font-size: 16.5px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.menu-item-desc { color: var(--ink-para); opacity: 0.85; font-size: 13.5px; margin: -3px 0 6px; max-width: 88%; font-style: italic; }
.menu-actions { margin-top: 6px; }
.menu-page .menu-actions { text-align: center; margin-top: 44px; }
.menu-page { padding-top: clamp(80px, 8vw, 110px); }

/* Several ways of selling one thing: the price columns share their width with
   the headings above them (js/menu-page.js counts the columns) */
.menu-cat.multi { --pc: 64px; }
.menu-cat.multi .mi-price { width: var(--pc); flex: none; text-align: right; }
.menu-cat.multi.cols-3 { --pc: 62px; }
.menu-cat.flat-price .mi-name { white-space: normal; }
.menu-item.mi-head { padding: 0 0 4px; border-bottom: 1px solid var(--line-ink); margin-bottom: 4px; }
.menu-item.mi-head .mi-price { font-family: var(--sans); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-para); line-height: 1.25; white-space: normal; }

.btn.wa-btn { background: #25d366; border-color: #25d366; color: #06301a; box-shadow: none; }
.btn.wa-btn:hover { background: #1fb457; border-color: #1fb457; color: #06301a; box-shadow: none; }
.btn.wa-btn.busy { opacity: .6; pointer-events: none; }
.btn.wa-btn svg { width: 19px; height: 19px; fill: currentColor; flex: none; }

.carte-lang { display: flex; justify-content: center; gap: 0; margin: 10px 0 clamp(30px, 3vw, 46px); }
.carte-lang button {
  background: transparent; border: 0; cursor: pointer;
  font-family: var(--neonf); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 10px 16px; min-height: 44px; color: var(--ink-para);
  border-bottom: 2px solid transparent; transition: color .3s var(--ease), border-color .3s var(--ease);
}
.carte-lang button + button { border-left: 1px solid var(--line-ink); }
.carte-lang button:hover { color: var(--ink); }
.carte-lang button.active { color: var(--rasp); border-bottom-color: var(--rasp); }
@media (max-width: 560px) {
  .carte-lang button { padding: 10px 11px; font-size: 12px; letter-spacing: .08em; }
}
.menu-page .promo-notice { margin-bottom: 22px; }

/* ---------- The vibe: alcoves of the room on film ---------- */
.vibe { overflow: hidden; }
/* Light thrown off water onto a cave wall, drifting very slowly */
.vibe::before {
  content: ''; position: absolute; inset: -20%; pointer-events: none; opacity: 0.55;
  background:
    radial-gradient(18% 12% at 20% 30%, rgba(255, 51, 71, 0.16), transparent 70%),
    radial-gradient(14% 18% at 70% 20%, rgba(255, 90, 110, 0.12), transparent 70%),
    radial-gradient(22% 14% at 55% 75%, rgba(255, 51, 71, 0.12), transparent 70%),
    radial-gradient(16% 10% at 85% 65%, rgba(154, 166, 238, 0.08), transparent 70%);
  animation: caustics 22s ease-in-out infinite alternate;
}
@keyframes caustics { from { transform: translate3d(-3%, -2%, 0) rotate(-2deg); } to { transform: translate3d(3%, 2%, 0) rotate(2deg); } }
.vibe-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; flex-wrap: wrap; }
.vibe-head .section-sub { margin-bottom: 8px; }
.vibe-nav { display: flex; gap: 10px; }
.vibe-nav button {
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  background: transparent; border: 1.5px solid var(--line); color: var(--foam); transition: 0.3s var(--ease);
}
.vibe-nav button:hover { border-color: var(--neon); box-shadow: var(--glow-soft); }
.vibe-nav svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.vibe-rail {
  position: relative; display: flex; gap: clamp(14px, 1.6vw, 24px);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding: 10px max(5vw, calc((100vw - 1200px) / 2)) 20px;
}
.vibe-rail::-webkit-scrollbar { display: none; }
.vibe-card {
  position: relative; flex: 0 0 auto; width: clamp(210px, 21vw, 290px); aspect-ratio: 9 / 16;
  padding: 0; border: 0; background: var(--abyss-2); overflow: hidden; cursor: zoom-in;
  scroll-snap-align: center;
  border-radius: 999px 999px 24px 24px;
  box-shadow: 0 0 0 1.5px rgba(255, 51, 71, 0.35), 0 26px 50px rgba(0, 0, 0, 0.45);
  transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease);
}
/* Each alcove is cut a little differently, the way the real vault is */
.vibe-card:nth-child(3n+2) { border-radius: 46% 54% 24px 24px / 26% 30% 24px 24px; margin-top: 34px; }
.vibe-card:nth-child(3n) { border-radius: 60% 40% 24px 24px / 32% 22% 24px 24px; margin-top: 12px; }
.vibe-card video, .vibe-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vibe-card video { opacity: 0; transition: opacity 0.6s; }
.vibe-card.playing video { opacity: 1; }
.vibe-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 58%, rgba(18, 6, 7, 0.9)); pointer-events: none; }
.vibe-card:hover { transform: translateY(-8px); box-shadow: 0 0 0 1.5px var(--neon), 0 0 34px rgba(255, 51, 71, 0.4), 0 30px 60px rgba(0, 0, 0, 0.5); }
.vibe-label {
  position: absolute; left: 0; right: 0; bottom: 20px; z-index: 2; text-align: center;
  font-family: var(--neonf); font-size: 17px; letter-spacing: 0.12em; text-transform: uppercase;
  color: #ffe1e4; text-shadow: 0 0 6px var(--neon), 0 0 16px rgba(255, 51, 71, 0.7);
}
.vibe-play {
  position: absolute; top: 50%; left: 50%; z-index: 2; width: 54px; height: 54px; margin: -27px 0 0 -27px;
  border-radius: 50%; display: grid; place-items: center; background: rgba(18, 6, 7, 0.5);
  border: 1.5px solid rgba(255, 255, 255, 0.55); opacity: 0; transition: opacity 0.4s;
}
.vibe-play svg { width: 18px; height: 18px; fill: #fff; margin-left: 3px; }
.vibe-card:hover .vibe-play { opacity: 1; }
.vibe-note { margin-top: 18px; font-size: 13.5px; color: var(--para); opacity: 0.8; }
.vibe-note a { color: var(--neon-text); border-bottom: 1px solid var(--line); }

.lightbox .lb-video { max-width: 90vw; max-height: 86vh; max-height: 86dvh; background: #000; border-radius: 16px; }
.lightbox .hidden { display: none !important; }
.lightbox.lb-single .lb-prev, .lightbox.lb-single .lb-next { display: none; }

/* ---------- Rooms: four mouths of the cave ---------- */
.spaces-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 2vw, 26px); align-items: end; }
.space-card {
  position: relative; overflow: hidden; aspect-ratio: 3 / 4.6;
  border-radius: 999px 999px 18px 18px;
  box-shadow: 0 26px 50px rgba(29, 11, 14, 0.25);
}
.space-card:nth-child(2) { aspect-ratio: 3 / 5.2; }
.space-card:nth-child(3) { aspect-ratio: 3 / 4.2; }
.space-card:nth-child(4) { aspect-ratio: 3 / 5; }
.space-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.space-card:hover img { transform: scale(1.06); }
.space-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(18, 6, 7, 0.88)); }
/* A tube of neon traces the mouth of the arch when the pointer is on it */
.space-card::before {
  content: ''; position: absolute; inset: 8px; z-index: 3; border-radius: inherit; pointer-events: none;
  border: 1.5px solid #ff6b79; box-shadow: var(--glow), inset 0 0 14px rgba(255, 51, 71, 0.4);
  opacity: 0; transition: opacity 0.5s var(--ease);
}
.space-card:hover::before { opacity: 1; }
.space-card figcaption { position: absolute; left: 16px; right: 16px; bottom: 22px; z-index: 2; text-align: center; }
.space-card figcaption span { display: block; font-family: var(--display); font-size: clamp(24px, 2.2vw, 32px); line-height: 1.05; color: var(--foam); }
.space-card figcaption small:empty { display: none; }
.space-card figcaption small { display: block; font-family: var(--neonf); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: #ff8a93; margin-top: 6px; }

/* ---------- Gallery: pebbles in the dark ---------- */
.gallery-section { background: var(--abyss); }
.gal-grid { display: grid; grid-auto-flow: dense; grid-template-columns: repeat(4, 1fr); grid-auto-rows: clamp(150px, 17vw, 230px); gap: clamp(14px, 1.8vw, 26px); }
.gal-tile {
  position: relative; border: 0; padding: 0; overflow: hidden; cursor: zoom-in; background: var(--abyss-2);
  box-shadow: 0 0 0 1px rgba(255, 51, 71, 0.18), 0 20px 40px rgba(0, 0, 0, 0.45);
  transition: transform 0.7s var(--ease), box-shadow 0.7s var(--ease), border-radius 1.2s var(--ease);
}
.gal-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.gal-tile:hover { transform: translateY(-6px); box-shadow: 0 0 0 1.5px var(--neon), 0 0 30px rgba(255, 51, 71, 0.35), 0 26px 50px rgba(0, 0, 0, 0.5); z-index: 2; }
.gal-tile:hover img { transform: scale(1.05); }
/* Water-worn shapes, no two alike, and one long stone per row */
.gal-1 { grid-column: span 2; border-radius: 42% 58% 38% 62% / 52% 44% 56% 48%; }
.gal-2 { grid-row: span 2; border-radius: 48% 52% 46% 54% / 30% 34% 66% 70%; }
.gal-3 { border-radius: 58% 42% 52% 48% / 46% 58% 42% 54%; }
.gal-4 { grid-row: span 2; border-radius: 40% 60% 54% 46% / 28% 36% 64% 72%; }
.gal-5 { border-radius: 52% 48% 60% 40% / 56% 44% 56% 44%; }
.gal-6 { grid-column: span 2; border-radius: 60% 40% 48% 52% / 46% 54% 46% 54%; }
.gal-7 { border-radius: 44% 56% 40% 60% / 60% 46% 54% 40%; }
.gal-8 { border-radius: 56% 44% 58% 42% / 42% 56% 44% 58%; }
@media (max-width: 760px) {
  .gal-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 44vw; gap: 12px; }
  .gal-1, .gal-6 { grid-column: span 2; }
}

/* ---------- Welcome pop-up ---------- */
.welcome-pop {
  position: fixed; inset: 0; z-index: 130; display: grid; place-items: center; padding: 24px;
  background: rgba(10, 3, 4, 0.86); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none; transition: opacity 0.3s var(--ease);
}
.welcome-pop.open { opacity: 1; pointer-events: auto; }
.welcome-pop-card {
  position: relative; width: min(760px, 100%); background: var(--abyss-2);
  border: 1.5px solid var(--neon); border-radius: 26px; padding: 12px 12px 26px;
  box-shadow: 0 0 40px rgba(255, 51, 71, 0.3), 0 30px 70px rgba(0, 0, 0, 0.5);
  transform: translateY(14px); transition: transform 0.35s var(--ease);
}
.welcome-pop.open .welcome-pop-card { transform: none; }
.welcome-pop-img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; border-radius: 16px; }
.welcome-pop-cta { display: flex; width: max-content; margin: 22px auto 4px; }
.welcome-pop-close {
  position: absolute; top: -16px; right: -16px; z-index: 2; width: 44px; height: 44px; border-radius: 50%;
  background: var(--abyss); border: 1.5px solid var(--neon); color: var(--foam); font-size: 22px; line-height: 1;
  display: grid; place-items: center; transition: background 0.3s;
}
.welcome-pop-close:hover { background: var(--neon); }
@media (max-width: 560px) { .welcome-pop { padding: 18px; } .welcome-pop-close { top: -10px; right: -10px; } }

.lightbox {
  position: fixed; inset: 0; z-index: 90; background: rgba(10, 3, 4, 0.96);
  display: grid; place-items: center; opacity: 0; pointer-events: none; transition: opacity 0.35s;
}
.lightbox.open { opacity: 1; pointer-events: auto; }
.lightbox img { max-width: 90vw; max-height: 86vh; max-height: 86dvh; object-fit: contain; border-radius: 12px; }
.lightbox button {
  position: absolute; background: rgba(18, 6, 7, 0.6); border: 1.5px solid var(--line); border-radius: 50%; color: var(--foam);
  width: 50px; height: 50px; font-size: 18px; transition: 0.3s; display: grid; place-items: center;
}
.lightbox button:hover { border-color: var(--neon); box-shadow: var(--glow-soft); }
.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 / map, on the plaster ---------- */
.info-grid { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: clamp(40px, 5vw, 84px); align-items: stretch; }
.info-grid.no-map { grid-template-columns: 1fr; max-width: 620px; }
.info-open { margin-bottom: 18px; }
.plaster .open-sign { color: var(--ink); font-size: 16px; }
.plaster .open-sign.is-open { text-shadow: none; }
.hours-list { list-style: none; }
.hours-list li { display: flex; align-items: baseline; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line-ink); font-size: 15px; }
.hours-list li.today { background: linear-gradient(90deg, rgba(184, 19, 74, 0.08), transparent); }
.hours-list .day-col { min-width: 190px; display: flex; flex-direction: column; gap: 0; }
.hours-list .day { font-family: var(--display); font-size: 20px; color: var(--ink); }
.hours-list .day-note { font-family: var(--neonf); font-size: 14px; letter-spacing: 0.04em; line-height: 1.3; color: var(--rasp); }
.hours-list .dots { flex: 1; border-bottom: 1.5px dotted var(--line-ink); transform: translateY(-5px); }
.hours-list .time { color: var(--ink); letter-spacing: 0.06em; font-size: 15px; font-variant-numeric: tabular-nums; }
.hours-list .closed { color: var(--rasp); font-family: var(--neonf); font-size: 16px; }
.contact-lines { margin-top: 30px; display: grid; gap: 12px; color: var(--ink-para); font-size: 15px; }
.contact-lines > div { display: grid; grid-template-columns: 110px 1fr; align-items: baseline; }
.contact-lines strong { font-family: var(--neonf); font-weight: 400; font-size: 12.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--rasp); }
.contact-lines a:hover { color: var(--rasp); }
.map-wrap { border-radius: 30px; overflow: hidden; min-height: 440px; isolation: isolate; position: relative; box-shadow: 0 0 0 1.5px var(--rasp), 0 26px 50px rgba(29, 11, 14, 0.2); }
/* The street plan in the cave's colours: inverted to night, warmed to red */
#map { min-height: 440px; height: 100%; z-index: 1; }
#map .leaflet-tile-pane { filter: invert(0.92) hue-rotate(160deg) saturate(0.55) brightness(0.9) sepia(0.25); }
.map-pin { position: relative; width: 22px; height: 22px; }
.map-pin::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--neon); border: 3px solid #fff; box-shadow: var(--glow); }
.map-pin::after { content: ''; position: absolute; inset: -12px; border-radius: 50%; border: 2px solid var(--neon); animation: pin-pulse 2s ease-out infinite; }
@keyframes pin-pulse { from { transform: scale(0.5); opacity: 0.9; } to { transform: scale(1.3); opacity: 0; } }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--abyss-2); color: var(--foam); border: 1px solid var(--line); }
.leaflet-popup-content a { color: var(--neon-text); font-weight: 500; }
.leaflet-container a.leaflet-popup-close-button { color: var(--para); }

/* ---------- Contact ---------- */
.contact-band {
  background:
    linear-gradient(180deg, rgba(18, 6, 7, 0.9), rgba(18, 6, 7, 0.95)),
    url('/images/account-bg.jpg') center / cover no-repeat;
}
.contact-inner { text-align: center; max-width: 1080px; margin: 0 auto; }
.contact-band .section-title { font-size: clamp(42px, 5.4vw, 76px); }
.contact-lead { color: var(--para); max-width: 600px; margin: 0 auto 44px; }
.contact-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: 40px;
}
.contact-card { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 28px 16px; text-align: center; transition: background .4s var(--ease); }
.contact-card + .contact-card { border-left: 1px solid var(--line-soft); }
a.contact-card:hover { background: rgba(255, 51, 71, 0.07); }
.cc-icon { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--neon); box-shadow: var(--glow-soft); }
.cc-icon svg { width: 16px; height: 16px; fill: #ff8a93; }
.cc-body { display: grid; gap: 4px; min-width: 0; }
.cc-body small { font-family: var(--neonf); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--neon-text); }
.cc-body b { font-weight: 400; font-size: 15.5px; color: var(--foam); 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-cards { grid-template-columns: minmax(0, 1fr); }
  .contact-card + .contact-card { border-left: 0; border-top: 1px solid var(--line-soft); }
  .contact-actions .btn { width: 100%; }
}

/* ---------- Reservation: an alcove cut into the plaster ---------- */
.reserve-section { padding-top: clamp(110px, 11vw, 160px); }
.reserve-panel {
  position: relative; max-width: 660px; margin: 0 auto;
  background:
    linear-gradient(rgba(231, 219, 212, 0.8), rgba(231, 219, 212, 0.8)),
    url('/images/stucco.jpg') 0 0 / 512px 512px;
  color: var(--ink);
  border-radius: 330px 330px 30px 30px / 200px 200px 30px 30px;
  padding: clamp(84px, 9vw, 110px) clamp(24px, 6vw, 64px) clamp(36px, 5vw, 54px);
  box-shadow: inset 0 18px 40px rgba(29, 11, 14, 0.16), inset 0 -2px 0 rgba(255, 255, 255, 0.6), 0 0 0 1.5px rgba(184, 19, 74, 0.4);
}
.reserve-anchor { position: absolute; top: 30px; left: 50%; transform: translateX(-50%); width: 34px; height: 40px; fill: none; stroke: var(--anchor); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.reserve-panel .section-head { margin-bottom: 0; }
.reserve-panel .section-title { font-size: clamp(36px, 4.8vw, 60px); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 28px; margin-top: 34px; position: relative; }
.form-field { display: grid; gap: 4px; }
.form-field.full { grid-column: 1 / -1; }
.form-field label { font-family: var(--neonf); font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.2em; color: var(--rasp); }
.form-field input, .form-field select {
  background: rgba(255, 255, 255, 0.35); border: 0; border-bottom: 1.5px solid rgba(29, 11, 14, 0.35);
  color: var(--ink); padding: 11px 10px; font-family: var(--sans); font-size: 16px;
  transition: border-color 0.3s, background 0.3s; width: 100%; border-radius: 10px 10px 0 0; appearance: none;
}
.form-field input:focus, .form-field select:focus { outline: none; border-bottom-color: var(--rasp); background: rgba(255, 255, 255, 0.6); }
.form-field input::placeholder { color: rgba(29, 11, 14, 0.38); }
.form-field select {
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 16px) 55%, calc(100% - 11px) 55%; background-size: 5px 5px; background-repeat: no-repeat;
}
.form-field select option { background: var(--plaster); color: var(--ink); }
.form-field input[type='date'] { color-scheme: light; }
.phone-row { display: grid; grid-template-columns: 120px 1fr; gap: 14px; }
.form-note { color: var(--ink-para); font-size: 13.5px; margin-top: 18px; text-align: center; }
.form-submit { margin-top: 34px; text-align: center; }
.form-msg { margin-top: 18px; text-align: center; font-size: 14.5px; display: none; }
.form-msg.ok { display: block; color: #1f6a3a; }
.form-msg.err { display: block; color: var(--rasp-deep); }
.reserve-panel .prefill-note { color: var(--rasp); }
.field-note { display: block; margin-top: 6px; font-size: 12.5px; color: var(--ink-para); }

/* ---------- Footer ---------- */
footer { background: var(--abyss); padding: clamp(110px, 10vw, 140px) 0 34px; overflow: hidden; position: relative; }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 44px; margin-bottom: 30px; }
.footer-grid h4 { font-family: var(--neonf); font-weight: 400; font-size: 13px; letter-spacing: 0.26em; text-transform: uppercase; margin-bottom: 18px; color: var(--neon-text); }
.footer-grid p, .footer-grid a, .footer-grid li { color: var(--para); font-size: 14.5px; list-style: none; }
.footer-grid p { max-width: 40ch; }
.footer-grid a:hover { color: #ff8a93; }
.footer-grid ul { display: grid; gap: 9px; }
.footer-logo { width: 210px; height: auto; margin-bottom: 18px; }
/* The name once more, carved in the plaster of the vault */
.footer-word {
  font-family: var(--display); font-size: clamp(76px, 15.5vw, 236px); line-height: 0.95;
  text-align: center; margin: 24px 0 34px; white-space: nowrap;
  background: url('/images/stucco.jpg') 0 0 / 380px 380px; -webkit-background-clip: text; background-clip: text; color: transparent;
  opacity: 0.85; user-select: none;
}
.socials { display: flex; gap: 14px; margin-top: 22px; }
/* The brand mark is the button, in its own colours, never filtered */
.socials a { width: 42px; height: 42px; display: block; border-radius: 11px; overflow: hidden; transition: transform 0.3s var(--ease), box-shadow 0.3s; }
.socials a img { width: 100%; height: 100%; object-fit: contain; display: block; }
.socials a:hover { transform: translateY(-3px); box-shadow: 0 0 18px rgba(255, 51, 71, 0.45); }
.footer-bottom { border-top: 1px solid var(--line-soft); padding-top: 24px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; color: var(--para); opacity: 0.85; font-size: 12.5px; letter-spacing: 0.05em; }
.footer-bottom a:hover { color: #ff8a93; }
/* Sub-pages: the vault edge over the footer */
.drip { position: absolute; top: -1px; left: 0; right: 0; height: 56px; background: var(--abyss-2);
  -webkit-mask: url('/images/drip.svg') 0 0 / 100% 100% no-repeat; mask: url('/images/drip.svg') 0 0 / 100% 100% no-repeat; }

/* ---------- Subpages ---------- */
.page-hero { height: 54vh; min-height: 400px; display: grid; place-items: center; text-align: center; position: relative; overflow: hidden; padding: 0; }
.page-hero .hero-bg::after { background: linear-gradient(180deg, rgba(18, 6, 7, 0.7) 0%, rgba(18, 6, 7, 0.4) 45%, var(--abyss) 100%); }
.hero-video { display: block; }
@media (prefers-reduced-motion: reduce), (max-width: 720px) {
  .hero-video { display: none; }
  .page-hero .hero-bg { background: url('../images/hero.jpg') center / cover no-repeat; }
}
.page-hero h1 { font-size: clamp(50px, 7.4vw, 104px); position: relative; z-index: 3; }
.page-hero .kicker { position: relative; z-index: 3; }
.page-hero > div:last-child { position: relative; z-index: 3; }
.page-hero .t-script { opacity: 1; animation: neonOn 1.4s steps(1, end) 0.3s both; }
.menu-page.plaster { padding-bottom: clamp(110px, 10vw, 150px); }
.legal { max-width: 800px; margin: 0 auto; }
.legal h2 { font-size: 28px; margin: 44px 0 14px; color: var(--foam); }
.legal p, .legal li { color: var(--para); font-size: 15.5px; margin-bottom: 12px; }
.legal ul { padding-left: 20px; }

.toast {
  position: fixed; bottom: 30px; left: 50%; transform: translate(-50%, 20px);
  background: var(--abyss-2); border: 1.5px solid var(--neon); border-radius: 999px; color: var(--foam);
  padding: 13px 28px; font-size: 14px; z-index: 100; opacity: 0; pointer-events: none; transition: 0.4s var(--ease);
  box-shadow: var(--glow-soft);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .spaces-grid { grid-template-columns: repeat(2, 1fr); align-items: start; }
  .space-card, .space-card:nth-child(n) { aspect-ratio: 3 / 4.4; }
  .space-card:nth-child(even) { margin-top: 40px; }
  .menu-split { grid-template-columns: 1fr; }
  .menu-aside { position: static; }
  .menu-cols { grid-template-columns: 1fr; }
  .hero-inner { grid-template-columns: 1fr; }
  .hero-niche { display: none; }
}
@media (max-width: 1260px) {
  .nav-links {
    position: fixed; inset: 0; height: 100svh;
    background: radial-gradient(90% 60% at 50% 0, rgba(255, 51, 71, 0.18), transparent 70%), var(--abyss);
    flex-direction: column; justify-content: center; align-items: center; gap: 18px;
    clip-path: circle(0% at calc(100% - 46px) 46px); visibility: hidden;
    transition: clip-path 0.6s var(--ease), visibility 0s 0.6s;
    grid-column: auto; grid-row: auto; z-index: 65; list-style: none;
  }
  .nav-links.open { clip-path: circle(150% at calc(100% - 46px) 46px); visibility: visible; transition: clip-path 0.6s var(--ease); }
  .nav-links a { font-family: var(--display); font-size: 36px; letter-spacing: 0; text-transform: none; display: inline-block; color: var(--foam); }
  .nav-links a:hover { color: #ff6b79; }
  .nav-links .mobile-only a { font-family: var(--neonf); font-size: 15px; letter-spacing: 0.2em; text-transform: uppercase; }
  .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.1s; }
  .nav-links.open li:nth-child(2) { animation-delay: 0.15s; }
  .nav-links.open li:nth-child(3) { animation-delay: 0.2s; }
  .nav-links.open li:nth-child(4) { animation-delay: 0.25s; }
  .nav-links.open li:nth-child(5) { animation-delay: 0.3s; }
  .nav-links.open li:nth-child(6) { animation-delay: 0.35s; }
  .nav-links.open li:nth-child(7) { animation-delay: 0.4s; }
  .nav-links.open li:nth-child(n+8) { animation-delay: 0.45s; }
  .nav-right { display: none; }
  .nav-links .mobile-only { display: block; }
  .burger { display: block; }
  .nav-simple .nav-links {
    position: static; height: auto; background: none; clip-path: none; visibility: visible;
    flex-direction: row; gap: 18px; z-index: auto;
  }
  .nav-simple .nav-links li { opacity: 1; transform: none; }
  .nav-simple .nav-links a { font-family: var(--neonf); font-size: 12px; text-transform: uppercase; letter-spacing: 0.14em; }
}
@keyframes navItemIn { to { opacity: 1; transform: none; } }
@media (max-width: 900px) {
  .about-grid, .info-grid { grid-template-columns: 1fr; }
  .about-images { max-width: 520px; margin: 0 auto; width: 100%; }
  .form-grid { grid-template-columns: 1fr; }
  .map-wrap, #map { min-height: 340px; }
  .footer-grid { grid-template-columns: 1fr; gap: 34px; }
  .reserve-panel { border-radius: 200px 200px 26px 26px / 120px 120px 26px 26px; }
}
@media (min-width: 901px) { .nav-links .mobile-only { display: none; } }
@media (max-width: 700px) {
  .hero-inner { padding: 110px 0 140px; }
  .hero-content { justify-items: center; text-align: center; }
  .hero-script { margin-inline: auto; }
  .hero-actions { justify-content: center; }
  .hero-bg::after {
    background:
      linear-gradient(180deg, rgba(18, 6, 7, 0.55), rgba(18, 6, 7, 0.35) 30%, rgba(18, 6, 7, 0.55) 70%, var(--abyss));
  }
  .hero-foot { justify-content: center; }
  .hero-where, .hero-scroll { display: none; }
}
@media (max-width: 560px) {
  .spaces-grid { gap: 12px; }
  .space-card figcaption { left: 10px; right: 10px; bottom: 16px; }
  .space-card figcaption span { font-size: 22px; }
  .hero-actions .btn { width: 100%; }
  .hero-tag { letter-spacing: 0.26em; }
  .menu-item { flex-wrap: nowrap; align-items: baseline; }
  .menu-item .mi-name { white-space: normal; max-width: none; flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; }
  .menu-item .mi-dots { flex: 0 1 14px; min-width: 0; }
  .menu-item .mi-price { flex: none; }
  .menu-cat.multi { --pc: 50px; }
  .menu-cat.multi .mi-price { font-size: 15px; }
  .menu-cat.multi .mi-head .mi-price { font-size: 9px; letter-spacing: 0.02em; }
  .mirror { padding: 24px 16px; border-radius: 22px; }
  .vibe-card { width: 62vw; }
  .reserve-panel { padding-top: 84px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal, .reveal-left { opacity: 1; transform: none; }
  .hero-content > *, .hero-niche { opacity: 1; }
  .reveal .t-script, .t-script { opacity: 1; text-shadow: var(--glow); }
  .plaster .t-script { text-shadow: none; }
  .kb { animation: none; }
  .hero video { display: none; }
}

/* ---------- Account (sign in, sign up, member area) ---------- */
.nav-auth {
  background: transparent; color: var(--foam) !important; border: 1.5px solid var(--line-soft);
  border-radius: 999px; padding: 10px 20px !important; letter-spacing: 0.14em;
  transition: background .3s, color .3s, border-color .3s;
}
.nav-auth:hover { border-color: var(--neon); color: #ff8a93 !important; }
.nav-auth.signed-in { border-color: var(--line); }

.page-account { background: var(--abyss); }
.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, 6, 7, .72), rgba(18, 6, 7, .85) 55%, rgba(18, 6, 7, .95)); }
.page-account .nav {
  background: rgba(18, 6, 7, 0.94); backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--line); padding: 10px 0;
}
.page-account .nav-logo img { height: 34px; }
.account-main { padding: 96px 0 36px; min-height: 100vh; min-height: 100dvh; box-sizing: border-box; display: flex; align-items: center; }
.account-main > .container { width: 100%; }
.page-account footer { background: rgba(18, 6, 7, .6); padding-top: 40px; }
.page-account footer > .drip { 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, 10, 12, 0.92); border: 1.5px solid var(--line);
  border-radius: 26px; padding: 30px 32px; text-align: center;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.auth-logo { display: block; width: 190px; height: auto; margin: 4px auto 14px; }
.auth-card .section-title { font-size: 32px; margin-bottom: 4px; }
.auth-sub { color: var(--para); font-size: 13.5px; line-height: 20px; 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-family: var(--neonf); font-size: 12px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--para); margin-top: 6px; }
.auth-form input, .auth-form select {
  width: 100%; background: rgba(10, 3, 4, 0.6); border: 1px solid var(--line-soft);
  border-radius: 12px; padding: 11px 13px; color: var(--foam); font-family: var(--sans); font-size: 14.5px;
}
.auth-form input:focus, .auth-form select:focus { outline: none; border-color: var(--neon); box-shadow: 0 0 0 3px rgba(255, 51, 71, 0.18); }
.auth-form select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #ff8a93 50%), linear-gradient(135deg, #ff8a93 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 option { background: var(--abyss); color: var(--foam); }
.auth-form .btn { margin-top: 14px; width: 100%; }
.auth-form .btn.ghost { margin-top: 8px; }
.auth-hint { font-size: 11px; color: var(--para); opacity: 0.75; line-height: 16px; margin-top: 4px; }
.gender-row { display: flex; gap: 8px; }
.gender-row button {
  flex: 1; background: rgba(10, 3, 4, 0.6); border: 1px solid var(--line-soft); border-radius: 12px;
  color: var(--para); padding: 9px 6px; font-size: 13px; font-family: var(--sans); transition: .25s;
}
.gender-row button:hover { border-color: var(--neon); }
.gender-row button.active { border-color: var(--neon); background: rgba(255, 51, 71, 0.14); color: #ff8a93; }
.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: #ff9aa2; }
.auth-msg.ok { color: #9fd8a9; }
.auth-switch { font-size: 13px; color: var(--para); text-align: center; margin-top: 10px; grid-column: 1 / -1; }
.auth-switch a { color: #ff8a93; text-decoration: underline; }
.pending-title { font-family: var(--display); font-size: 24px; margin-bottom: 8px; color: var(--foam); }

.member-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; margin: 26px 0 40px; }
.member-card { background: rgba(28, 10, 12, .9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1.5px solid var(--line); border-radius: 22px; padding: 26px; }
.member-card h3 { font-family: var(--display); font-size: 22px; 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, rgba(255, 51, 71, 0.25), var(--abyss-2) 70%); border-color: var(--neon); }
.fidelity-card .kicker { margin-bottom: 6px; }
.fidelity-card b { font-family: var(--display); font-size: 54px; font-weight: 400; color: #fff; line-height: 1; }
.fidelity-card p { color: var(--para); 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; margin-bottom: 16px; color: var(--foam); }
.res-list { display: grid; gap: 12px; }
.res-card {
  display: flex; align-items: center; gap: 18px; background: rgba(28, 10, 12, .9);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--line-soft); border-radius: 18px; padding: 16px 20px;
}
.res-when { display: grid; min-width: 88px; }
.res-when b { font-family: var(--display); font-weight: 400; font-size: 20px; color: #ff8a93; }
.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: 600; color: var(--foam); }
.res-meta span { font-size: 12px; color: var(--para); opacity: 0.75; }
.res-badge { font-family: var(--neonf); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; border: 1px solid; }
.res-badge.pending { color: #ff8a93; border-color: var(--neon); }
.res-badge.confirmed { color: #9fd8a9; border-color: rgba(159, 216, 169, 0.5); }
.res-badge.cancelled { color: #ff9aa2; border-color: rgba(255, 154, 162, 0.5); }
.prefill-note { color: #ff8a93; font-size: 13px; margin-top: 10px; }
.hidden { display: none !important; }
@media (max-width: 720px) {
  .account-main { padding: 110px 0 50px; min-height: auto; }
  .nav-auth { padding: 8px 14px !important; font-size: 11px; }
  .auth-card { padding: 24px 18px; }
  #signupForm { grid-template-columns: 1fr; }
  .res-card { flex-wrap: wrap; gap: 10px; }
  .res-when { min-width: 70px; }
}
@media (max-height: 900px) { .account-main { align-items: flex-start; padding-top: 88px; } }

.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: #ff8a93; opacity: 1; }
.pw-eye.on .eye-open { display: none; }
.pw-eye.on .eye-shut { display: block; }
.pw-eye:hover { color: var(--foam); opacity: 1; }
.auth-form label.stay-row {
  display: flex; align-items: center; gap: 9px; margin-top: 12px; font-family: var(--sans);
  font-size: 13px; text-transform: none; letter-spacing: 0.01em; color: var(--para); opacity: 1; cursor: pointer;
}
.stay-row input { width: 16px; height: 16px; accent-color: var(--neon); 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: #ff8a93; text-decoration: underline; white-space: nowrap; }
.forgot-link:hover { color: #ffb3b9; }
.birthday-note { font-size: 12px; color: #ff8a93; margin-top: 10px; text-align: center; background: rgba(255, 51, 71, 0.08); border: 1px solid var(--line); border-radius: 12px; padding: 9px 12px; }

/* ---------- Members' deal prices ---------- */
.mi-was { color: var(--ink-para); opacity: 0.6; margin-right: 8px; font-size: 0.9em; }
.mi-deal { color: #1f7a45; font-weight: 600; }
.nav-deals { color: #9fd8a9 !important; }
.deals-main { align-items: flex-start; padding-top: 118px; }
.deals-main .section-head { margin-bottom: 30px; }
.deals-empty {
  background: rgba(28, 10, 12, .9); border: 1.5px solid var(--line); border-radius: 22px;
  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: 28px; 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, 10, 12, .92); border: 1px solid rgba(159, 216, 169, .35); border-radius: 18px;
  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: #9fd8a9; }
.deal-card img { width: 74px; height: 74px; border-radius: 12px; object-fit: cover; flex: none; }
.deal-body { min-width: 0; flex: 1; }
.deal-body h3 { font-size: 18px; margin-bottom: 2px; }
.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: #9fd8a9; font-size: 17px; font-weight: 600; }
.deal-badge { position: absolute; top: 12px; right: 12px; background: rgba(159, 216, 169, .16); color: #9fd8a9; border-radius: 999px; 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-family: var(--neonf); font-size: 13px; text-transform: uppercase; letter-spacing: 0.18em; color: #ff8a93; margin-bottom: 10px; }
.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: 2px; top: 10px; width: 8px; height: 2px; border-radius: 2px; background: var(--neon); }
.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: #8f1d29; border-color: #8f1d29; color: #fff; box-shadow: none; }
.btn.danger:hover { background: transparent; border-color: #ff9aa2; color: #ff9aa2; }

/* ---------- Reservation time picker ---------- */
.timepick { position: relative; }
.timepick-btn {
  width: 100%; display: flex; align-items: center; gap: 10px;
  background: rgba(255, 255, 255, 0.35); border: 0; border-bottom: 1.5px solid rgba(29, 11, 14, 0.35); border-radius: 10px 10px 0 0;
  color: rgba(29, 11, 14, 0.55); padding: 11px 10px; font-family: var(--sans); font-size: 16px;
  text-align: left; transition: border-color 0.3s, color 0.3s, background 0.3s;
}
.timepick-btn:hover, .timepick-btn.open { border-color: var(--rasp); background: rgba(255, 255, 255, 0.6); }
.timepick-btn.chosen { color: var(--ink); }
.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(--ink);
  transition: transform 0.25s var(--ease);
}
.timepick-btn.open .tp-caret { transform: rotate(180deg); }
.timepick-btn svg { width: 16px; height: 16px; fill: var(--rasp); 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(--plaster); border: 1px solid var(--line-ink); border-radius: 16px;
  box-shadow: 0 18px 40px rgba(29, 11, 14, 0.22);
}
/* An author `display` beats the browser's own [hidden] rule */
.timepick-panel[hidden] { display: none; }
.timepick-slot {
  background: rgba(29, 11, 14, 0.05); border: 1px solid transparent; color: var(--ink); border-radius: 999px;
  padding: 9px 4px; font-family: var(--sans); font-size: 13.5px; letter-spacing: 0.04em; font-variant-numeric: tabular-nums;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.timepick-slot:hover { background: rgba(184, 19, 74, 0.14); }
.timepick-slot.on { background: var(--rasp); color: #fff; border-color: var(--rasp); }
.timepick-panel::-webkit-scrollbar { width: 6px; }
.timepick-panel::-webkit-scrollbar-thumb { background: var(--line-ink); border-radius: 3px; }
@media (max-width: 720px) { .timepick-panel { grid-template-columns: repeat(4, 1fr); max-height: 200px; } }

/* ---------- Boot cover ---------- */
.page-boot { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: var(--abyss); transition: opacity .25s ease; }
.page-boot.gone { opacity: 0; pointer-events: none; }
.boot-mark { position: relative; width: 120px; height: 120px; display: grid; place-items: center; }
.boot-mark img { width: 84px; height: auto; }
.boot-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(255, 51, 71, 0.16); border-top-color: var(--neon); 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 above the fixed nav, which promo.js pushes down by the
   measured height. Two identical sets slide exactly half the track. */
.promo-banner { position: fixed; inset: 0 0 auto 0; z-index: 70; background: var(--neon); box-shadow: 0 0 22px rgba(255, 51, 71, 0.5); 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-family: var(--neonf); font-size: 15px; letter-spacing: 0.1em; text-decoration: none; }
a.promo-banner-text:hover { color: var(--abyss); }
@keyframes promo-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .promo-track { animation: none; } }
@media (max-width: 860px) { .promo-banner { font-size: 13px; padding: 8px 14px; } }
.promo-notice { display: block; margin: 0 auto 26px; max-width: 640px; background: var(--rasp); color: #fff; font-family: var(--neonf); border-radius: 999px; padding: 11px 26px; text-align: center; font-size: 15px; letter-spacing: 0.06em; }
.promo-notice.hidden { display: none; }

/* ==========================================================================
   Phones: iPhone and Android
   ========================================================================== */
/* iOS zooms the page when a focused field is under 16px and never zooms back.
   A platform constraint, stated once with !important so no component rule
   added later can undo it. */
@media (max-width: 860px) { input, select, textarea { font-size: 16px !important; } }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
a, button, summary, [role="button"] { -webkit-tap-highlight-color: rgba(255, 51, 71, 0.2); }
/* The menu button is a 48x48 target where the burger is shown */
@media (max-width: 1260px) {
  .burger { width: 48px; height: 48px; }
  .burger span { left: 50%; width: 30px; transform: translateX(-50%); }
  .burger span:nth-child(2) { width: 20px; }
  .burger span:nth-child(1) { top: calc(50% - 10px); }
  .burger span:nth-child(2) { top: 50%; }
  .burger span:nth-child(3) { top: calc(50% + 10px); }
  .burger.open span:nth-child(1) { top: 50%; transform: translateX(-50%) rotate(45deg); }
  .burger.open span:nth-child(3) { top: 50%; transform: translateX(-50%) rotate(-45deg); }
}
@media (max-width: 900px) {
  .menu-tabs button { min-height: 44px; }
  .leaflet-touch .leaflet-bar a { width: 40px; height: 40px; line-height: 40px; }
}
@media (max-width: 720px) {
  .footer-grid ul a, .footer-bottom a { display: inline-flex; align-items: center; min-height: 44px; line-height: 1.25; }
  .footer-grid ul { gap: 0; }
  .footer-bottom { row-gap: 4px; }
  .contact-lines a { display: inline-flex; align-items: center; min-height: 40px; }
  .auth-switch a, .forgot-link { display: inline-block; padding: 11px 4px; }
  .stay-line { flex-wrap: wrap; row-gap: 2px; }
  .pw-eye { width: 44px; height: 44px; }
  .stay-row { min-height: 44px; }
  .stay-row input { width: 20px; height: 20px; }
  .leaflet-popup-content a { display: inline-block; padding: 8px 0; }
  .leaflet-popup-close-button { width: 32px !important; height: 32px !important; }
  .contact-lines { gap: 4px; }
  .form-field label, .auth-form label { font-size: 12.5px; }
  .vibe-nav { display: none; }
}

/* ---------- Online booking switched off in the panel ----------
   Every invitation to book comes down with the form. Set by js/booking.js. */
.bookings-off #reserve,
.bookings-off #bookFloat,
.bookings-off a[href="#reserve"],
.bookings-off a[href="/#reserve"] { display: none !important; }
.bookings-off li:has(> a[href="#reserve"]),
.bookings-off li:has(> a[href="/#reserve"]) { display: none !important; }

/* ---------- 404 and the legal pages ---------- */
.lost { min-height: 100svh; display: grid; place-items: center; text-align: center; }
.lost-logo { width: min(420px, 80vw); height: auto; margin: 0 auto 30px; }
.lost-sub { margin: 0 auto 34px; }
.legal-page { padding-top: 160px; }
/* After a plaster room the vault's own edge already hangs over the footer */
.plaster + footer .drip { display: none; }

/* ---------- Guest accounts closed (the default) ----------
   Until the owner opens accounts in the panel, nothing on the site invites a
   guest to sign in or up, and member deals are not offered. js/booking.js
   adds .accounts-on to reveal them. */
html:not(.accounts-on) #navAccount,
html:not(.accounts-on) #navSignup,
html:not(.accounts-on) .nav-deals-item,
html:not(.accounts-on) li:has(> a[href="/account"]),
html:not(.accounts-on) li:has(> a[href^="/account?"]),
html:not(.accounts-on) li:has(> #navAccount),
html:not(.accounts-on) li:has(> #navSignup) { display: none !important; }
/* Buttons in page bodies that lead to sign-in (delete-account, reset) go too;
   the delete-account page keeps its email route to the restaurant. */
html:not(.accounts-on) a.btn[href^="/account"],
html:not(.accounts-on) #delSignedOut > p[data-i18n="del.signInFirst"] { display: none !important; }