/* Annabel’s design system.
   Taken off the house itself: black marble veined in white, chesterfield
   leather the colour of oxblood, and the gold of the baroque logo. The page
   is one evening, 18:00 to 03:00: each section carries its hour, and the
   ground darkens from the warm glow of golden hour to the black of the
   small hours.

   Gloock for display, Brygada 1918 italic for the written word and the
   prices, Host Grotesk for everything spoken plainly. Frames are ovals and
   capsules, the shapes of the mirrors in the salons; nothing has a cut
   corner or a hard shadow. */

:root {
  --bg: #110d0d;          /* black marble */
  --bg-2: #0b0808;        /* the room with the lights down */
  --panel: #1a1312;
  --oxblood: #7a1a1d;     /* the chesterfields */
  --oxblood-2: #9b2a2a;
  --line: rgba(207, 168, 98, 0.26);
  --line-soft: rgba(242, 232, 213, 0.11);
  --text: #f4ead8;        /* cream, the tablecloths */
  --para: #c8baa4;
  --accent: #cfa862;      /* the logo's gold. Every action is this colour */
  --accent-2: #e4c993;    /* lighter gold, for type set on black */
  --accent-soft: rgba(207, 168, 98, 0.13);
  --ink: #18110f;         /* what sits on a gold fill */
  --cream: #f3e9d6;
  --sans: 'Host Grotesk', 'Segoe UI', system-ui, sans-serif;
  --display: 'Gloock', 'Brygada 1918', Georgia, serif;
  --serif: 'Brygada 1918', Georgia, serif;
  --script: 'Brygada 1918', Georgia, serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Marble veining, drawn rather than downloaded: three long, faint diagonal
     strokes repeated at awkward intervals so the pattern never reads as a
     tile. */
  --vein:
    repeating-linear-gradient(118deg, transparent 0 211px, rgba(242, 232, 213, 0.022) 211px 212px, transparent 212px 517px),
    repeating-linear-gradient(64deg, transparent 0 389px, rgba(242, 232, 213, 0.016) 389px 390px, transparent 390px 803px);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg-2); }

/* The evening: a warm glow at the top of the document that has burnt out by
   the last third. The body paints the whole canvas, so the sections stay
   transparent and the night falls behind them as the page scrolls. */
body {
  background:
    var(--vein),
    radial-gradient(120% 1400px at 70% 0, rgba(207, 132, 62, 0.20), transparent 70%),
    radial-gradient(90% 1800px at 10% 900px, rgba(122, 26, 29, 0.20), transparent 70%),
    linear-gradient(180deg, #1d1412 0, #150f0f 2200px, var(--bg) 4200px, var(--bg-2) 100%);
  color: var(--para);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 16.5px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* Pages other than the home page do not tell the hour, they just sit at night */
body:not(.home) { background: var(--vein), var(--bg); }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
::selection { background: var(--accent); color: var(--ink); }

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

/* Small, spaced capitals above every title */
.kicker {
  display: block;
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent);
}
/* The hour a section stands for. A fine rule leads into it, like the hand of
   a clock pointing at the figure. */
.hour-mark {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--serif); font-style: italic; font-size: 15px;
  color: var(--para); opacity: 0.75; margin-bottom: 10px;
}
.hour-mark::before { content: ''; width: 34px; height: 1px; background: currentColor; opacity: 0.6; }
.section-head.center .hour-mark { justify-content: center; }

.section-title {
  font-size: clamp(42px, 6vw, 84px);
  margin: 10px 0 18px;
  letter-spacing: -0.015em;
}
/* The one word in each title that is written rather than set */
.t-script {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--accent-2);
  letter-spacing: -0.01em;
}
.section-sub { color: var(--para); max-width: 540px; font-size: 16px; }
.serif { font-family: var(--serif); }

/* ---------- Layout ---------- */
.container { width: min(1200px, 90vw); margin: 0 auto; }
section { padding: clamp(90px, 11vw, 168px) 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; }

/* ---------- Buttons ---------- */
/* Outlined pills. On hover a band of light crosses the button, the way a
   lamp catches the brass of the bar, and the fill comes up behind it. */
.btn {
  position: relative; overflow: hidden;
  display: inline-block;
  padding: 15px 34px;
  border: 1px solid rgba(207, 168, 98, 0.6);
  border-radius: 999px;
  color: var(--text);
  background: transparent;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  isolation: isolate;
  transition: color 0.45s var(--ease), border-color 0.45s var(--ease), background-color 0.45s var(--ease);
}
.btn::after {
  content: ''; position: absolute; inset: -2px; z-index: -1;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 240, 210, 0.38) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 0.9s var(--ease);
}
.btn:hover::after { transform: translateX(120%); }
.btn:hover { background-color: var(--accent); border-color: var(--accent); color: var(--ink); }
.btn.solid { background-color: var(--accent); border-color: var(--accent); color: var(--ink); }
.btn.solid:hover { background-color: var(--accent-2); border-color: var(--accent-2); }
.btn.ghost { border-color: rgba(244, 234, 216, 0.32); color: var(--text); }
.btn.ghost:hover { border-color: var(--accent); background-color: var(--accent); color: var(--ink); }
.btn:disabled { opacity: 0.5; pointer-events: none; }

/* ---------- Nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  padding: 22px 0;
  transition: background 0.45s, padding 0.45s, box-shadow 0.45s;
}
.nav.scrolled {
  background: rgba(14, 10, 10, 0.9); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  padding: 10px 0; box-shadow: 0 1px 0 var(--line);
}
/* backdrop-filter makes the bar the containing block of the full-screen
   mobile menu; drop it while the menu is open */
.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; }
/* The wordmark is wide: a fixed height and an explicit width keep a crowded
   bar from collapsing its column to nothing. */
.nav-logo img { height: 52px; width: auto; min-width: 111px; flex: none; transition: height .35s var(--ease), min-width .35s var(--ease); }
.nav.scrolled .nav-logo img { height: 42px; min-width: 90px; }
.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: 16px; align-items: center; justify-content: flex-end; grid-column: 3; grid-row: 1; list-style: none; }
.nav-links a, .nav-right a {
  font-size: 12px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text); position: relative; padding: 6px 0;
  transition: color 0.3s;
}
/* A gold point under the link, rather than an underline */
.nav-links a::after {
  content: ''; position: absolute; left: 50%; bottom: -4px;
  width: 4px; height: 4px; border-radius: 50%; background: var(--accent);
  transform: translateX(-50%) scale(0); transition: transform 0.35s var(--ease);
}
.nav-links a:hover { color: var(--accent-2); }
.nav-links a:hover::after { transform: translateX(-50%) scale(1); }
.nav-links > li > a, .nav-right > li > a { white-space: nowrap; }
.nav-cta { border: 1px solid rgba(207, 168, 98, 0.6); border-radius: 999px; padding: 10px 20px !important; }
.nav-cta:hover { background: var(--accent); border-color: var(--accent); color: var(--ink) !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(--accent); border-radius: 999px; transition: transform 0.35s var(--ease);
}
.lang-switch.on-fr::before { transform: translateX(100%); }
.lang-switch button {
  position: relative; z-index: 1; background: transparent; border: 0; color: var(--para);
  font-size: 10.5px; letter-spacing: 0.12em; padding: 6px 13px; border-radius: 999px; transition: color 0.3s;
}
.lang-switch button.active { color: var(--ink); }

.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: 1px; background: var(--text); transition: 0.35s var(--ease); }
.burger span:nth-child(1) { top: 0; }
.burger span:nth-child(2) { top: 10px; width: 70%; left: 30%; }
.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 that follows the reader once the hero is gone */
.book-float {
  position: fixed; right: clamp(16px, 2.4vw, 34px); bottom: clamp(16px, 2.4vw, 30px); z-index: 55;
  padding: 13px 24px; border-radius: 999px;
  background: rgba(14, 10, 10, 0.86); border: 1px solid var(--accent); color: var(--accent-2);
  font-size: 11.5px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase;
  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, color 0.3s;
}
.book-float.on { opacity: 1; transform: none; pointer-events: auto; }
.book-float:hover { background: var(--accent); color: var(--ink); }

/* ---------- Hero ---------- */
.hero {
  height: 100svh; min-height: 660px; position: relative; overflow: hidden; padding: 0;
  display: grid; place-items: center; text-align: center;
}
.hero-bg { position: absolute; inset: 0; background: var(--bg-2); }
.hero-bg video, .hero-bg img { width: 100%; height: 100%; object-fit: cover; }
.hero-bg img.kb { animation: kenburns 24s var(--ease) infinite alternate; }
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.08); } }
/* A vignette that keeps the centre lit, like a table lamp, and lets the
   edges fall to black so the bar above stays legible */
.hero-bg::after {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(70% 60% at 50% 52%, rgba(17, 13, 13, 0.28), rgba(11, 8, 8, 0.82) 100%),
    linear-gradient(180deg, rgba(11, 8, 8, 0.55), transparent 28%, transparent 70%, rgba(17, 13, 13, 1));
}
.hero-content { position: relative; z-index: 2; padding: 0 24px; max-width: 1100px; }
.hero-tag {
  font-size: 12px; font-weight: 500; letter-spacing: 0.5em; text-indent: 0.5em;
  text-transform: uppercase; color: var(--accent-2);
}
.hero-script {
  margin: 22px auto 0;
  font-family: var(--display);
  font-size: clamp(46px, 8vw, 122px);
  line-height: 0.98; letter-spacing: -0.02em;
  color: var(--cream);
  max-width: 13ch;
  text-wrap: balance;
}
.hero-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 46px; }
.hero-content > * { opacity: 0; transform: translateY(22px); animation: heroIn 1.2s var(--ease) forwards; }
.hero-content > *:nth-child(2) { animation-delay: 0.15s; }
.hero-content > *:nth-child(3) { animation-delay: 0.32s; }
@keyframes heroIn { to { opacity: 1; transform: none; } }
@keyframes navItemIn { to { opacity: 1; transform: none; } }

/* Hours and street along the foot of the hero, the two facts people look for */
.hero-foot {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: clamp(22px, 4vh, 40px);
  width: min(1200px, 90vw); margin: 0 auto;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  font-size: 12px; letter-spacing: 0.18em; 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: 18px; letter-spacing: 0.04em; color: var(--accent-2); }
.hero-hours i { display: block; width: 54px; height: 1px; background: var(--accent); opacity: 0.6; }
@media (max-width: 700px) {
  .hero-foot { justify-content: center; }
  .hero-where { display: none; }
}

/* ---------- 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; }
/* Mirrors open from the middle: the frame is observed, the image inside it
   is what grows, because a clipped element reports no intersection. */
.img-oval .img-frame, .img-capsule .img-frame { clip-path: ellipse(0% 0% at 50% 50%); transition: clip-path 1.6s var(--ease); }
.img-oval.visible .img-frame, .img-capsule.visible .img-frame { clip-path: ellipse(75% 75% at 50% 50%); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .reveal-left { opacity: 1; transform: none; transition: none; }
  .img-oval .img-frame, .img-capsule .img-frame { clip-path: none; transition: none; }
  .kb { animation: none; }
  .hero video { display: none; }
}

/* ---------- About ---------- */
.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; }
.img-frame { overflow: hidden; }
.img-frame img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.img-frame:hover img { transform: scale(1.05); }
/* An oval mirror, ringed by a fine gold line set a little off the glass */
.img-oval { width: 76%; position: relative; }
.img-oval .img-main { aspect-ratio: 3 / 4; border-radius: 50%; }
.img-oval::after {
  content: ''; position: absolute; inset: -14px; border-radius: 50%;
  border: 1px solid var(--line); pointer-events: none;
}
.img-capsule { position: absolute; right: 0; bottom: 0; width: 40%; }
.img-capsule .img-accent { aspect-ratio: 2 / 3; border-radius: 999px; border: 8px solid var(--bg); }
.about-text p { color: var(--para); margin: 22px 0; font-size: 16.5px; max-width: 52ch; }
.about-sign img { width: 150px; height: auto; margin-top: 12px; opacity: 0.9; }

/* ---------- Golden Hour ---------- */
/* The one lit band on the page: the sun is still out, so the gold is the
   ground and the type is ink. */
.afterwork {
  background:
    radial-gradient(80% 140% at 85% 10%, rgba(255, 233, 186, 0.55), transparent 60%),
    linear-gradient(120deg, #d9b26c 0%, #c79650 55%, #a8743a 100%);
  color: var(--ink);
  margin: clamp(20px, 3vw, 40px) clamp(0px, 2vw, 28px);
  border-radius: clamp(28px, 5vw, 80px);
}
.afterwork-inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 7vw, 110px); align-items: center; }
.afterwork .hour-mark, .afterwork .kicker { color: var(--ink); }
.afterwork .kicker { opacity: 0.75; }
.afterwork .section-title { color: var(--ink); margin-bottom: 6px; }
.afterwork .t-script { color: #4a1c12; }
.afterwork-copy p { color: rgba(24, 17, 15, 0.82); margin-bottom: 22px; max-width: 44ch; }
.afterwork-time { font-family: var(--serif); font-style: italic; font-size: 24px; color: var(--ink) !important; margin: 0 0 16px !important; }
.afterwork .btn { border-color: rgba(24, 17, 15, 0.55); color: var(--ink); }
.afterwork .btn:hover { background-color: var(--ink); border-color: var(--ink); color: var(--accent-2); }
/* The short card, set like a menu printed on the gold */
.afterwork-list { border-top: 1px solid rgba(24, 17, 15, 0.4); border-bottom: 1px solid rgba(24, 17, 15, 0.4); padding: 14px 0; }
.aw-row { display: flex; align-items: baseline; gap: 12px; padding: 9px 0; }
.aw-row + .aw-row { border-top: 1px solid rgba(24, 17, 15, 0.12); }
.aw-name { font-family: var(--display); font-size: 19px; color: var(--ink); }
.aw-dots { flex: 1; }
.aw-price { font-family: var(--serif); font-style: italic; font-size: 16px; color: #4a1c12; white-space: nowrap; }
@media (max-width: 900px) { .afterwork-inner { grid-template-columns: 1fr; } }

/* ---------- Menu ---------- */
.menu-section { background: transparent; }
/* The home preview: the title, tabs and link hold still on the left while
   the dishes scroll past on the right */
.menu-split { display: grid; grid-template-columns: minmax(260px, 0.8fr) 1.6fr; gap: clamp(40px, 6vw, 100px); 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-section:not(#menu) .menu-tabs, .menu-page .menu-tabs { justify-content: center; margin-bottom: 30px; }
.menu-tabs button {
  background: transparent; border: 1px solid var(--line-soft); color: var(--para); border-radius: 999px;
  padding: 11px 26px; font-size: 11.5px; letter-spacing: 0.22em; text-transform: uppercase; transition: 0.35s;
}
.menu-tabs button:hover { border-color: var(--line); color: var(--text); }
.menu-tabs button.active { border-color: var(--accent); color: var(--ink); background: var(--accent); }
.menu-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(30px, 3vw, 48px) clamp(34px, 4vw, 64px); 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-page .menu-cat.two-way { --price-col: 58px; --price-col-alt: 70px; }
}
.menu-cat h3 {
  font-family: var(--display); font-size: 27px; color: var(--text);
  margin-bottom: 12px; display: flex; align-items: center; gap: 16px;
}
.menu-cat h3::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line), transparent); }
.menu-cat-sub { font-family: var(--serif); font-style: italic; color: var(--accent-2); font-size: 15px; margin: -6px 0 10px; }
.menu-item { display: flex; align-items: baseline; gap: 10px; padding: 6px 0; }
.menu-item .mi-name { font-family: var(--sans); font-size: 16px; font-weight: 400; color: var(--text); white-space: nowrap; }
.menu-item .mi-dots { flex: 1; border-bottom: 1px dotted rgba(207, 168, 98, 0.32); transform: translateY(-5px); }
.menu-item .mi-price { font-family: var(--serif); font-style: italic; color: var(--accent-2); font-size: 15.5px; white-space: nowrap; }
.menu-item-desc { color: var(--para); opacity: 0.78; font-size: 13.5px; margin: -3px 0 6px; max-width: 88%; }
.menu-actions { margin-top: 6px; }
.menu-page .menu-actions { text-align: center; margin-top: 44px; }
.menu-page { padding-top: clamp(46px, 5vw, 74px); }

.btn.wa-btn { display: inline-flex; align-items: center; gap: 11px; background-color: #25d366; border-color: #25d366; color: #06301a; }
.btn.wa-btn:hover { background-color: #1fb457; border-color: #1fb457; color: #06301a; }
.btn.wa-btn.busy { opacity: .6; pointer-events: none; }
.btn.wa-btn svg { width: 19px; height: 19px; fill: currentColor; flex: none; }

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

/* Glass and bottle: one row, two price columns sharing one width with their
   headings, centred, so the figures sit under the middle of each heading */
.menu-cat.two-way { --price-col: 84px; --price-col-alt: 93px; }
.menu-cat.two-way .mi-price { width: var(--price-col); flex: none; text-align: center; }
.menu-cat.two-way .mi-price.alt { width: var(--price-col-alt); }
.menu-cat.flat-price .mi-name { white-space: normal; }
.menu-item.mi-head { padding: 0 0 4px; border-bottom: 1px solid var(--line-soft); margin-bottom: 4px; }
.menu-item.mi-head .mi-price {
  font-family: var(--sans); font-style: normal; font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--para); opacity: 0.75;
}

/* ---------- The nights: the venue's own posters, then a medallion a night ---------- */
.ritual-section { overflow: hidden; }
.ritual-stage { position: relative; }
.ritual-marquee {
  position: relative; width: 100vw; margin-left: calc(50% - 50vw);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ritual-track {
  display: flex; gap: clamp(16px, 1.8vw, 28px);
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none;
  overscroll-behavior-x: contain; padding: 18px 0;
}
.ritual-track::-webkit-scrollbar { display: none; }
/* Portrait posters in a passe-partout: a fine gold rule set inside the edge */
.ritual-card {
  position: relative; flex: 0 0 auto; width: clamp(220px, 22vw, 330px); aspect-ratio: 4 / 5;
  padding: 0; border: 0; border-radius: 6px; overflow: hidden; background: var(--panel); cursor: zoom-in;
  transition: transform 0.5s var(--ease);
}
.ritual-card::after { content: ''; position: absolute; inset: 10px; border: 1px solid rgba(228, 201, 147, 0.45); border-radius: 3px; pointer-events: none; }
.ritual-card img { width: 100%; height: 100%; object-fit: cover; display: block; -webkit-user-drag: none; user-select: none; }
.ritual-card:hover { transform: translateY(-6px); }
.ritual-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 56px; height: 56px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 50%;
  background: rgba(14, 10, 10, 0.72); backdrop-filter: blur(6px); color: var(--text);
  transition: background 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease);
}
.ritual-arrow.prev { left: clamp(10px, 3vw, 46px); }
.ritual-arrow.next { right: clamp(10px, 3vw, 46px); }
.ritual-arrow svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ritual-arrow:hover { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.ritual-arrow:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; }
@media (max-width: 760px) { .ritual-arrow { width: 44px; height: 44px; } .ritual-arrow svg { width: 18px; height: 18px; } }

.nights-invite { display: grid; justify-items: center; gap: 10px; margin-top: clamp(34px, 3.6vw, 52px); text-align: center; }
.nights-invite.hidden { display: none; }
.nights-invite p { font-family: var(--serif); font-style: italic; font-size: clamp(15px, 1.5vw, 18px); color: var(--accent-2); margin: 0; }
.nights-hand { display: block; width: 40px; color: var(--accent); }
.nights-hand svg { width: 100%; height: auto; display: block; fill: currentColor; animation: nightsPoint 3.4s var(--ease) infinite; }
@keyframes nightsPoint { 0%, 62%, 100% { transform: translateY(0); } 76% { transform: translateY(7px); } 88% { transform: translateY(2px); } }

.nights { margin-top: clamp(18px, 2vw, 28px); width: 100vw; margin-left: calc(50% - 50vw); padding-inline: clamp(14px, 3vw, 54px); }
.nights-track {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(132px, 1fr);
  gap: clamp(12px, 1.6vw, 26px); overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; padding: 6px 0 12px; scrollbar-width: none; max-width: 1240px; margin: 0 auto;
}
.nights-track::-webkit-scrollbar { display: none; }
/* A round medallion per night, like the coasters on the bar */
.night-card {
  position: relative; overflow: hidden; aspect-ratio: 1 / 1; border-radius: 50%;
  border: 1px solid var(--line); background: var(--panel); padding: 0; cursor: pointer;
  scroll-snap-align: start; display: grid; place-items: center;
  transition: border-color 0.4s var(--ease), transform 0.4s var(--ease);
}
.night-card.is-empty { cursor: default; }
.night-bg {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  filter: blur(4px) brightness(.5) saturate(.9); transform: scale(1.14);
  transition: filter .45s var(--ease), transform .6s var(--ease);
}
.night-card::after { content: ''; position: absolute; inset: 7px; border-radius: 50%; border: 1px solid rgba(228, 201, 147, 0.22); pointer-events: none; }
.night-label { position: relative; z-index: 2; display: grid; gap: 4px; justify-items: center; padding: 0 12px; text-align: center; }
.night-label strong { font-family: var(--display); font-weight: 400; font-size: clamp(16px, 1.4vw, 20px); color: var(--text); }
.night-label small { font-family: var(--serif); font-style: italic; font-size: clamp(11.5px, 1vw, 13px); color: var(--accent-2); opacity: .9; line-height: 1.25; }
.night-card:not(.is-empty):hover { border-color: var(--accent); transform: translateY(-4px); }
.night-card:not(.is-empty):hover .night-bg { filter: blur(1px) brightness(.66); transform: scale(1.05); }
.night-card.is-today { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.night-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.lightbox .lb-video { max-width: 90vw; max-height: 86vh; max-height: 86dvh; background: #000; }
.lightbox .hidden { display: none !important; }
.lightbox.lb-single .lb-prev, .lightbox.lb-single .lb-next { display: none; }
@media (prefers-reduced-motion: reduce) { .nights-hand svg { animation: none; } }

/* ---------- Spaces: four tall capsules, the shape of the salon mirrors ---------- */
.spaces-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 2vw, 26px); }
.space-card { position: relative; overflow: hidden; aspect-ratio: 1 / 1.9; border-radius: 999px; }
.space-card:nth-child(even) { transform: translateY(46px); }
.space-card.reveal.visible:nth-child(even) { transform: translateY(46px); }
.space-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.space-card:hover img { transform: scale(1.07); }
.space-card::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, transparent 45%, rgba(11, 8, 8, 0.86)); }
.space-card::before { content: ''; position: absolute; inset: 9px; z-index: 3; border-radius: inherit; border: 1px solid rgba(228, 201, 147, 0.32); pointer-events: none; }
.space-card figcaption {
  position: absolute; left: 0; right: 0; bottom: 13%; z-index: 2; text-align: center;
  font-family: var(--display); font-size: clamp(20px, 1.8vw, 26px); color: var(--text);
}
.space-card figcaption small:empty { display: none; }
.space-card figcaption small { display: block; font-family: var(--serif); font-style: italic; font-size: 15px; color: var(--accent-2); margin-top: 2px; }
#spaces { padding-bottom: clamp(130px, 14vw, 210px); }

/* ---------- Gallery: a wall of frames ---------- */
.gal-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: clamp(170px, 17vw, 260px);
  grid-template-areas: "a b c d" "a e e f" "g g h f";
  gap: clamp(10px, 1.2vw, 18px);
}
.gal-tile { position: relative; overflow: hidden; border: 0; padding: 0; background: var(--panel); border-radius: 4px; cursor: zoom-in; }
.gal-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease), filter 0.6s; filter: saturate(0.92); }
.gal-tile:hover img { transform: scale(1.06); filter: saturate(1.05); }
.gal-tile::after { content: ''; position: absolute; inset: 0; border-radius: inherit; border: 1px solid transparent; transition: border-color .4s; }
.gal-tile:hover::after { border-color: var(--accent); }
.gal-1 { grid-area: a; border-radius: 999px 999px 4px 4px; }
.gal-2 { grid-area: b; } .gal-3 { grid-area: c; } .gal-4 { grid-area: d; }
.gal-5 { grid-area: e; } .gal-6 { grid-area: f; border-radius: 4px 4px 999px 999px; }
.gal-7 { grid-area: g; } .gal-8 { grid-area: h; }
@media (max-width: 760px) {
  .gal-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 46vw;
    grid-template-areas: "a b" "a c" "e e" "d f" "h f" "g g"; }
}

/* ---------- Welcome pop-up ---------- */
.welcome-pop {
  position: fixed; inset: 0; z-index: 130; display: grid; place-items: center; padding: 24px;
  background: rgba(11, 8, 8, 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(--bg-2);
  border: 1px solid var(--line); border-radius: 18px; padding: 14px 14px 26px;
  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: 10px; }
.welcome-pop-cta { display: block; width: max-content; margin: 22px auto 4px; }
.welcome-pop-close {
  position: absolute; top: -14px; right: -14px; z-index: 2; width: 44px; height: 44px; border-radius: 50%;
  background: var(--bg-2); border: 1px solid var(--line); color: var(--text); font-size: 22px; line-height: 1;
  display: grid; place-items: center; transition: color 0.3s, border-color 0.3s;
}
.welcome-pop-close:hover { color: var(--accent); border-color: var(--accent); }
@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(9, 6, 6, 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; }
.lightbox button {
  position: absolute; background: none; border: 1px solid var(--line); border-radius: 50%; color: var(--text);
  width: 48px; height: 48px; font-size: 18px; transition: 0.3s; display: grid; place-items: center;
}
.lightbox button:hover { border-color: var(--accent); color: var(--accent-2); }
.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 ---------- */
.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; }
.hours-list { list-style: none; }
.hours-list li { display: flex; align-items: baseline; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line-soft); font-size: 15px; }
.hours-list .day-col { min-width: 160px; display: flex; flex-direction: column; gap: 1px; }
.hours-list .day { font-family: var(--display); font-size: 19px; color: var(--text); }
.hours-list .day-note { font-family: var(--serif); font-style: italic; font-size: 14px; color: var(--accent-2); opacity: 0.9; }
.hours-list .dots { flex: 1; }
.hours-list .time { color: var(--para); letter-spacing: 0.08em; font-size: 14px; }
.hours-list .closed { color: var(--accent-2); font-family: var(--serif); font-style: italic; }
.contact-lines { margin-top: 30px; display: grid; gap: 12px; color: var(--para); font-size: 15px; }
.contact-lines > div { display: grid; grid-template-columns: 110px 1fr; align-items: baseline; }
.contact-lines strong { font-size: 10.5px; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent); }
.contact-lines a:hover { color: var(--accent-2); }
/* The map sits in a capsule window, the oval motif turned on its side */
.map-wrap { border-radius: 260px; overflow: hidden; border: 1px solid var(--line); min-height: 420px; isolation: isolate; }
#map { min-height: 420px; height: 100%; z-index: 1; filter: grayscale(0.55) sepia(0.25) brightness(0.86) contrast(1.05); }
.map-pin { position: relative; width: 22px; height: 22px; }
.map-pin::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--oxblood-2); border: 3px solid var(--accent-2); }
.map-pin::after { content: ''; position: absolute; inset: -12px; border-radius: 50%; border: 2px solid var(--oxblood-2); 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(--cream); color: var(--ink); }
.leaflet-popup-content a { color: var(--oxblood); font-weight: 500; }

/* ---------- Contact ---------- */
/* Chesterfield red: the band reads as leather, a row of facts on it */
.contact-band {
  background:
    radial-gradient(120% 90% at 50% 0, rgba(155, 42, 42, 0.55), transparent 70%),
    linear-gradient(180deg, rgba(122, 26, 29, 0.85), rgba(70, 14, 17, 0.92)),
    url('/images/contact-bg.jpg') center / cover no-repeat;
  margin: 0 clamp(0px, 2vw, 28px);
  border-radius: clamp(28px, 5vw, 80px);
  overflow: hidden;
}
.contact-inner { text-align: center; max-width: 1080px; margin: 0 auto; }
.contact-band .kicker, .contact-band .hour-mark { color: var(--accent-2); }
.contact-band .section-title { font-size: clamp(40px, 5.4vw, 72px); }
.contact-lead { color: rgba(244, 234, 216, 0.85); max-width: 600px; margin: 0 auto 44px; }
.contact-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  border-top: 1px solid rgba(228, 201, 147, 0.35); border-bottom: 1px solid rgba(228, 201, 147, 0.35);
  margin-bottom: 40px;
}
.contact-card {
  display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 26px 16px; text-align: center;
  transition: background .4s var(--ease);
}
.contact-card + .contact-card { border-left: 1px solid rgba(228, 201, 147, 0.2); }
a.contact-card:hover { background: rgba(11, 8, 8, 0.2); }
.cc-icon { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(228, 201, 147, 0.55); }
.cc-icon svg { width: 15px; height: 15px; fill: var(--accent-2); }
.cc-body { display: grid; gap: 4px; min-width: 0; }
.cc-body small { font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent-2); }
.cc-body b { font-weight: 400; font-size: 15px; color: var(--text); overflow-wrap: anywhere; }
.contact-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 30px; }
.contact-band .btn.ghost { border-color: rgba(244, 234, 216, 0.5); }
.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 rgba(228, 201, 147, 0.2); }
  .contact-actions .btn { width: 100%; }
}

/* ---------- Reservation: an invitation card ---------- */
.reserve-section { padding-top: clamp(100px, 11vw, 160px); }
.reserve-panel {
  position: relative; max-width: 740px; margin: 0 auto;
  background:
    radial-gradient(120% 70% at 50% 0, rgba(255, 255, 255, 0.5), transparent 60%),
    var(--cream);
  color: var(--ink);
  border-radius: 360px 360px 18px 18px;
  padding: clamp(80px, 9vw, 120px) clamp(28px, 6vw, 76px) clamp(40px, 5vw, 60px);
}
/* A gold rule inside the card's edge, following its arched top */
.reserve-panel::before {
  content: ''; position: absolute; inset: 12px; pointer-events: none;
  border: 1px solid rgba(160, 118, 52, 0.55); border-radius: 350px 350px 10px 10px;
}
.reserve-panel .kicker { color: #8a6326; }
.reserve-panel .section-title { color: var(--ink); font-size: clamp(38px, 5vw, 62px); }
.reserve-panel .t-script { color: var(--oxblood); }
.reserve-panel .section-sub { color: rgba(24, 17, 15, 0.75); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 28px; margin-top: 38px; position: relative; }
.form-field { display: grid; gap: 6px; }
.form-field.full { grid-column: 1 / -1; }
.form-field label { font-size: 10.5px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.24em; color: #6f5326; }
/* Underline fields, the way a card is filled in by hand */
.form-field input, .form-field select {
  background: transparent; border: 0; border-bottom: 1px solid rgba(24, 17, 15, 0.35);
  color: var(--ink); padding: 10px 2px; font-family: var(--sans); font-size: 16px; font-weight: 400;
  transition: border-color 0.3s; width: 100%; border-radius: 0; appearance: none;
}
.form-field input:focus, .form-field select:focus { outline: none; border-bottom-color: var(--oxblood); }
.form-field input::placeholder { color: rgba(24, 17, 15, 0.35); }
.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% - 14px) 55%, calc(100% - 9px) 55%; background-size: 5px 5px; background-repeat: no-repeat;
}
.form-field select option { background: var(--cream); 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: rgba(24, 17, 15, 0.65); font-size: 13px; margin-top: 18px; text-align: center; }
.form-submit { margin-top: 34px; text-align: center; }
.form-msg { margin-top: 18px; text-align: center; font-size: 14px; display: none; }
.form-msg.ok { display: block; color: #2f6b3c; }
.form-msg.err { display: block; color: var(--oxblood); }
.reserve-panel .prefill-note { color: #6f5326; }
@media (max-width: 600px) {
  .reserve-panel { border-radius: 200px 200px 14px 14px; padding-top: 90px; }
  .reserve-panel::before { border-radius: 190px 190px 8px 8px; }
}

/* ---------- Footer ---------- */
footer { background: var(--bg-2); border-top: 1px solid var(--line); padding: 80px 0 34px; overflow: hidden; }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 44px; margin-bottom: 30px; }
.footer-grid h4 { font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; margin-bottom: 18px; color: var(--accent); }
.footer-grid p, .footer-grid a, .footer-grid li { color: var(--para); font-size: 14px; list-style: none; }
.footer-grid p { max-width: 38ch; }
.footer-grid a:hover { color: var(--accent-2); }
.footer-grid ul { display: grid; gap: 9px; }
.footer-logo { width: 150px; height: auto; margin-bottom: 18px; }
/* The name, set once more at the very bottom, as large as the page allows */
.footer-word {
  font-family: var(--display); font-size: clamp(64px, 17vw, 260px); line-height: 0.82;
  text-align: center; letter-spacing: -0.04em; margin: 20px 0 26px;
  background: linear-gradient(180deg, rgba(207, 168, 98, 0.5), rgba(207, 168, 98, 0.04));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  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: 40px; height: 40px; display: block; border-radius: 10px; overflow: hidden; transition: transform 0.3s var(--ease); }
.socials a img { width: 100%; height: 100%; object-fit: contain; display: block; }
.socials a:hover { transform: translateY(-3px); }
.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.8; font-size: 12px; letter-spacing: 0.06em; }
.footer-bottom a:hover { color: var(--accent-2); }

/* ---------- Subpages ---------- */
.page-hero { height: 52vh; min-height: 380px; display: grid; place-items: center; text-align: center; position: relative; overflow: hidden; padding: 0; }
.page-hero .hero-bg img { animation: none; }
.page-hero .hero-bg::after { background: linear-gradient(180deg, rgba(11, 8, 8, 0.7) 0%, rgba(11, 8, 8, 0.45) 45%, rgba(17, 13, 13, 1) 100%); }
.hero-video { display: block; }
.page-hero .hero-video { filter: blur(2px) saturate(1.02); transform: scale(1.04); }
@media (prefers-reduced-motion: reduce), (max-width: 720px) {
  .hero-video { display: none; }
  .page-hero .hero-bg { background: url('../images/menu-hero-poster.jpg') center / cover no-repeat; }
}
.page-hero h1 { font-size: clamp(46px, 7vw, 96px); position: relative; z-index: 2; letter-spacing: -0.02em; }
.page-hero .kicker { position: relative; z-index: 2; }
.legal { max-width: 800px; margin: 0 auto; }
.legal h1 { letter-spacing: -0.01em; }
.legal h2 { font-size: 26px; margin: 44px 0 14px; color: var(--accent-2); }
.legal p, .legal li { color: var(--para); font-size: 15px; margin-bottom: 12px; }
.legal ul { padding-left: 20px; }

.toast {
  position: fixed; bottom: 30px; left: 50%; transform: translate(-50%, 20px);
  background: var(--panel); border: 1px solid var(--accent); border-radius: 999px; color: var(--text);
  padding: 13px 28px; font-size: 13.5px; z-index: 100; opacity: 0; pointer-events: none; transition: 0.4s var(--ease);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .spaces-grid { grid-template-columns: repeat(2, 1fr); }
  .space-card { aspect-ratio: 1 / 1.6; }
  .menu-split { grid-template-columns: 1fr; }
  .menu-aside { position: static; }
  .menu-cols { grid-template-columns: 1fr; }
}
@media (max-width: 1260px) {
  .nav-links {
    position: fixed; inset: 0; height: 100svh;
    background: radial-gradient(90% 60% at 50% 0, rgba(122, 26, 29, 0.35), transparent 70%), var(--bg-2);
    flex-direction: column; justify-content: center; align-items: center; gap: 22px;
    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: 30px; letter-spacing: 0; text-transform: none; display: inline-block; }
  .nav-links .mobile-only a { font-family: var(--sans); font-size: 13px; 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(--sans); font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; }
}
@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; }
  .map-wrap { border-radius: 170px; }
  .footer-grid { grid-template-columns: 1fr; gap: 34px; }
}
@media (min-width: 901px) { .nav-links .mobile-only { display: none; } }
@media (max-width: 560px) {
  .spaces-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .space-card:nth-child(even), .space-card.reveal.visible:nth-child(even) { transform: translateY(28px); }
  .space-card::before { inset: 6px; }
  .space-card figcaption { font-size: 18px; }
  .space-card figcaption small { font-size: 13px; }
  .hero-actions .btn { width: 100%; text-align: center; }
  .hero-tag { letter-spacing: 0.3em; text-indent: 0.3em; }
  .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 18px; min-width: 0; }
  .menu-item .mi-price { flex: none; }
  .menu-cat.two-way { --price-col: 54px; --price-col-alt: 66px; }
  .menu-cat.two-way .mi-head .mi-price { font-size: 8.5px; letter-spacing: 0.06em; }
  .afterwork, .contact-band { margin-inline: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal, .reveal-left { opacity: 1; transform: none; }
}

/* ---------- Account (sign in, sign up, member area) ---------- */
.nav-auth {
  background: var(--accent); color: var(--ink) !important; border: 1px solid var(--accent);
  border-radius: 999px; padding: 10px 20px !important; letter-spacing: 0.14em;
  transition: background .3s, color .3s;
}
.nav-auth:hover { background: var(--accent-2); border-color: var(--accent-2); }
.nav-auth.signed-in { background: transparent; color: var(--accent-2) !important; }

/* The photo sits behind the whole page, so scrolling never reveals a bare slab */
.page-account { background: var(--bg-2); }
.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(14, 10, 10,.62), rgba(14, 10, 10,.78) 55%, rgba(14, 10, 10,.92));
}
/* A form page has no hero, so the bar is solid from the start */
.page-account .nav {
  background: rgba(14, 10, 10, 0.95); backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--line-soft); padding: 12px 0;
}
.page-account .nav-logo img { height: 52px; }
/* border-box so the padding is inside the viewport height: the card centres
   in what is left under the nav instead of pushing the page into a scroll */
.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 { border-top: 1px solid var(--line-soft); background: rgba(14, 10, 10,.55); }

/* These are <section> elements, which the site pads generously by default;
   inside the account shell that padding is what pushed the card off screen. */
.account-main section { padding: 0; }
.auth-wrap { display: flex; justify-content: center; width: 100%; }
.auth-card {
  width: min(560px, 100%); background: rgba(26, 19, 18, 0.86); border: 1px solid var(--line);
  border-radius: 18px; padding: 30px 32px; text-align: center;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45);
}
.auth-logo { width: 54px; height: 54px; border-radius: 50%; margin-bottom: 8px; }
.auth-card .section-title { font-size: 25px; margin-bottom: 4px; }
.auth-sub { color: var(--para); font-size: 13px; line-height: 19px; margin-bottom: 12px; }
.auth-form { display: grid; gap: 6px; text-align: left; }
/* Sign-up has more fields, so it runs two across and needs no scrolling */
#signupForm { grid-template-columns: 1fr 1fr; column-gap: 14px; }
#signupForm .full { grid-column: 1 / -1; }
.auth-form label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.15em;
  color: var(--para); opacity: 0.8; margin-top: 6px;
}
.auth-form input {
  width: 100%; background: var(--bg-2); border: 1px solid var(--line-soft);
  border-radius: 10px; padding: 11px 13px; color: var(--text);
  font-family: var(--sans); font-size: 14.5px;
}
.auth-form input:focus { outline: none; border-color: var(--accent); }
.auth-form .btn { margin-top: 14px; width: 100%; }
.auth-form .btn.ghost { margin-top: 8px; }
.auth-hint { font-size: 10.5px; color: var(--para); opacity: 0.7; line-height: 16px; margin-top: 4px; }
/* Gender: optional, three choices, same shape as the app */
.gender-row { display: flex; gap: 8px; }
.gender-row button {
  flex: 1; background: var(--bg-2); border: 1px solid var(--line-soft); border-radius: 10px;
  color: var(--para); padding: 9px 6px; font-size: 13px; font-family: var(--sans); transition: .25s;
}
.gender-row button:hover { border-color: var(--accent); }
.gender-row button.active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-2); }
.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: #e0a49b; }
.auth-msg.ok { color: #9ab28a; }
.auth-switch { font-size: 13px; color: var(--para); text-align: center; margin-top: 10px; grid-column: 1 / -1; }
.auth-switch a { color: var(--accent-2); text-decoration: underline; }
.pending-title { font-family: var(--serif); font-size: 23px; font-weight: 500; margin-bottom: 8px; }

.member-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; margin: 26px 0 40px; }
.member-card { background: rgba(26, 19, 18,.82); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--line); border-radius: 16px; padding: 26px; }
.member-card h3 { font-family: var(--serif); font-size: 20px; font-weight: 500; 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, #7a1a1d, #3d0e10 60%, var(--panel)); border-color: #9b2a2a; }
.fidelity-card .kicker { display: block; margin-bottom: 6px; }
.fidelity-card b { font-family: var(--serif); font-size: 54px; font-weight: 500; 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(--serif); font-size: 22px; font-weight: 500; margin-bottom: 16px; }
.res-list { display: grid; gap: 12px; }
.res-card {
  display: flex; align-items: center; gap: 18px; background: rgba(26, 19, 18,.82);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--line-soft); border-radius: 14px; padding: 16px 20px;
}
.res-when { display: grid; min-width: 88px; }
.res-when b { font-family: var(--serif); font-size: 19px; color: var(--accent-2); }
.res-when span { font-size: 12px; color: var(--para); opacity: 0.8; }
.res-meta { display: grid; flex: 1; }
.res-meta b { font-size: 14px; font-weight: 500; }
.res-meta span { font-size: 12px; color: var(--para); opacity: 0.7; }
.res-badge { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; border: 1px solid; }
.res-badge.pending { color: var(--accent-2); border-color: var(--accent); }
.res-badge.confirmed { color: #9ab28a; border-color: rgba(154, 178, 138, 0.5); }
.res-badge.cancelled { color: #e0a49b; border-color: rgba(224, 164, 155, 0.5); }

.prefill-note { color: var(--accent-2); 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; }
}


/* On a short screen, centring a tall card pushes it below the fold, so it
   starts just under the bar instead and uses the height that is there. */
@media (max-height: 900px) {
  .account-main { align-items: flex-start; padding-top: 88px; }
}

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

.auth-form select {
  width: 100%; background: var(--bg-2); border: 1px solid var(--line-soft);
  border-radius: 10px; padding: 11px 13px; color: var(--text);
  font-family: var(--sans); font-size: 14.5px; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--accent-2) 50%),
                    linear-gradient(135deg, var(--accent-2) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.auth-form select:focus { outline: none; border-color: var(--accent); }
.auth-form select option { background: var(--bg-2); color: var(--text); }

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

.auth-form label.stay-row {
  display: flex; align-items: center; gap: 9px; margin-top: 12px;
  font-size: 13px; text-transform: none; letter-spacing: 0.01em;
  color: var(--para); opacity: 1; cursor: pointer;
}
.stay-row input { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }
/* Keeps "Forgot password?" on the same line as the checkbox, so the card
   does not grow taller and push the button below the fold */
.stay-line { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.stay-line .stay-row { margin-top: 12px; }
.forgot-link {
  margin-top: 12px; font-size: 13px; color: var(--accent-2);
  text-decoration: underline; white-space: nowrap;
}
.forgot-link:hover { color: var(--accent); }
.birthday-note {
  font-size: 12px; color: var(--accent-2); margin-top: 10px; text-align: center;
  background: var(--accent-soft); border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px;
}

/* ---------- Members' deal prices ---------- */
.mi-was { color: var(--para); opacity: 0.55; margin-right: 10px; font-size: 0.92em; }
.mi-deal { color: #9ab28a; font-weight: 500; }
.nav-deals { color: #9ab28a !important; }

/* ---------- Deals page ---------- */
.deals-main { align-items: flex-start; padding-top: 118px; }
.deals-main .section-head { margin-bottom: 30px; }
.deals-empty {
  background: rgba(26, 19, 18,.82); border: 1px solid var(--line); border-radius: 16px;
  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(--serif); font-size: 26px; font-weight: 500; 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(26, 19, 18,.85); border: 1px solid rgba(154, 178, 138,.35); border-radius: 16px;
  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: #9ab28a; }
.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: 17px; font-weight: 400; 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: #9ab28a; font-size: 17px; font-weight: 500; }
.deal-badge {
  position: absolute; top: 12px; right: 12px; background: rgba(154, 178, 138,.16);
  color: #9ab28a; 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-size: 12px; text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--accent-2); 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: 0; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.del-note { font-size: 13px; color: var(--para); margin-top: 12px; line-height: 1.6; }
.del-or { margin-top: 20px; }
.del-app { border-top: 1px solid var(--line-soft); padding-top: 16px; margin-top: 22px; opacity: 0.85; }
.del-card .btn { width: 100%; margin-top: 12px; text-align: center; }
.btn.danger { background: #8f3b32; border-color: #8f3b32; color: #fff; }
.btn.danger:hover { background: transparent; border-color: #e0a49b; color: #e0a49b; }

/* ---------- Reservation time picker ---------- */
.timepick { position: relative; }
.timepick-btn {
  width: 100%; display: flex; align-items: center; gap: 10px;
  background: rgba(14, 10, 10, 0.55); border: 1px solid var(--line-soft); color: var(--para);
  padding: 14px 16px; font-family: var(--sans); font-size: 15px; font-weight: 300;
  letter-spacing: 0.03em; text-align: left; transition: border-color 0.3s, color 0.3s;
}
.timepick-btn:hover { border-color: var(--accent); }
.timepick-btn.open { border-color: var(--accent); }
.timepick-btn.chosen { color: var(--text); }
.timepick-btn .tp-caret {
  width: 0; height: 0; flex: none; margin-left: auto;
  border-left: 5px solid transparent; border-right: 5px solid transparent;
  border-top: 5px solid var(--para);
  transition: transform 0.25s var(--ease);
}
.timepick-btn.open .tp-caret { transform: rotate(180deg); }
.timepick-btn svg { width: 16px; height: 16px; fill: var(--accent-2); 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: #1a1312; border: 1px solid var(--line);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}
/* An author `display` beats the browser's own [hidden] rule, so the closed
   state has to be stated here or the panel stays on screen for good. */
.timepick-panel[hidden] { display: none; }
.timepick-slot {
  background: rgba(255, 255, 255, 0.04); border: 1px solid transparent; color: var(--para);
  padding: 9px 4px; font-family: var(--sans); font-size: 13.5px; letter-spacing: 0.04em;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.timepick-slot:hover { background: var(--accent-soft); color: var(--text); border-color: var(--accent); }
.timepick-slot.on { background: var(--accent); color: var(--ink); border-color: var(--accent); }
.timepick-panel::-webkit-scrollbar { width: 6px; }
.timepick-panel::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }

@media (max-width: 720px) {
  .timepick-panel { grid-template-columns: repeat(4, 1fr); max-height: 200px; }
}

/* ---------- Boot cover ---------- */
.page-boot {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
  background: var(--bg-2); transition: opacity .25s ease;
}
.page-boot.gone { opacity: 0; pointer-events: none; }
.boot-mark { position: relative; width: 104px; height: 104px; display: grid; place-items: center; }
.boot-mark img { width: 62px; height: 62px; border-radius: 50%; }
.boot-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid rgba(207, 168, 98, 0.18); border-top-color: var(--accent);
  animation: bootSpin .9s linear infinite;
}
@keyframes bootSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .boot-ring { animation-duration: 2.4s; } }

/* ---------- Marketing ---------- */
/* Announcement strip. Sits above the fixed nav, which promo.js pushes down by
   the measured height. The text runs right to left on a loop: two identical
   sets of copies slide exactly half the track, so the seam never shows. */
.promo-banner {
  position: fixed; inset: 0 0 auto 0; z-index: 70;
  background: #cfa862;
  border-bottom: 1px solid rgba(0, 0, 0, 0.22);
  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: #000; font-weight: 700;
  font-size: 14px; letter-spacing: 0.08em; text-decoration: none;
}
a.promo-banner-text:hover { color: #2b2b2b; }
@keyframes promo-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
/* Reading a moving line can be impossible for some people, so hold it still */
@media (prefers-reduced-motion: reduce) {
  .promo-track { animation: none; }
}

@media (max-width: 860px) {
  .promo-banner { font-size: 13px; padding: 8px 14px; }
}

/* Live promotion notice on the menu page */
.promo-notice {
  display: block; margin: 0 auto 26px; max-width: 640px;
  background: #cfa862; color: #000; font-weight: 700;
  border-radius: 999px; padding: 11px 26px;
  text-align: center; font-size: 14.5px; letter-spacing: 0.06em;
}
.promo-notice.hidden { display: none; }

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


/* ==========================================================================
   Phones: iPhone and Android

   Audited across 8 device viewports from 280px to 430px. The page itself
   never overflowed; what was wrong was everything a thumb has to hit, plus
   one iOS fault that made the booking form genuinely unpleasant to use.
   ========================================================================== */

/* iOS Safari zooms the entire page in when a focused field is under 16px, and
   does not zoom back out. Every field on the booking form was 15px and the
   sign-in fields 14.5px, so tapping "Full name" threw the layout sideways on
   an iPhone. 16px is the threshold, not a preference. */
@media (max-width: 860px) {
  /* !important on purpose. The component rules (.form-field input at 15px,
     .auth-form input at 14.5px) carry a class and so outrank a bare element
     selector; a media query adds no specificity of its own. This is a platform
     constraint rather than a style preference, and it has to win over any rule
     added later, so it is stated once here instead of chased around the file. */
  input, select, textarea { font-size: 16px !important; }
}

/* Text stays where the design put it when a phone is turned to landscape.
   Without this iOS inflates it and the carte reflows on rotation alone. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* The grey flash on tap belongs to the browser, not to this palette */
a, button, summary, [role="button"] { -webkit-tap-highlight-color: rgba(207, 168, 98, 0.18); }

/* The menu button was 30x22. Apple asks for 44x44 and Android for 48dp, and at
   that size it is genuinely easy to miss. The button itself grows to 48x48
   rather than gaining an invisible overlay, so the target is the thing you can
   actually measure. The three bars keep their 30px width, centred inside it,
   so nothing about the design moves. Scoped to the width where the burger is
   shown at all. */
@media (max-width: 1260px) {
  .burger { width: 48px; height: 48px; }
  .burger span { left: 50%; width: 30px; transform: translateX(-50%); }
  .burger span:nth-child(1) { top: calc(50% - 11px); }
  .burger span:nth-child(2) { top: 50%; }
  .burger span:nth-child(3) { top: calc(50% + 11px); }
  .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) {
  /* Food / Drinks were 38px tall */
  .menu-tabs button { min-height: 44px; }

  /* Leaflet ships 30px controls. Its own selector carries three classes, so
     matching it takes the same shape rather than an !important. */
  .leaflet-touch .leaflet-bar a { width: 40px; height: 40px; line-height: 40px; }
}

@media (max-width: 720px) {
  /* Footer and contact links were 14 to 16px tall, which is a line of text,
     not a target. They grow by min-height rather than padding, so the box
     gets taller around the same text and nothing shifts sideways. */
  .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; }

  /* Sign-in helper links were 14 to 21px tall */
  .auth-switch a, .forgot-link { display: inline-block; padding: 11px 4px; }
  .stay-line { flex-wrap: wrap; row-gap: 2px; }

  /* The reveal-password button and the stay-signed-in box are both hit while
     typing a password, which is when a miss costs the most. */
  .pw-eye { width: 44px; height: 44px; }
  .stay-row { min-height: 44px; }
  .stay-row input { width: 20px; height: 20px; }

  /* Inside the map bubble, so reached only after a tap on the pin, but it is
     still a link a thumb has to land on. */
  .leaflet-popup-content a { display: inline-block; padding: 8px 0; }
  .leaflet-popup-close-button { width: 32px !important; height: 32px !important; }
  .contact-lines { gap: 4px; }

  /* 10px is below what a phone renders comfortably. Only the smallest labels
     move, and only here: the desktop typography is untouched. */
  .form-field label, .auth-form label { font-size: 12px; }
}

/* ---------- Annabel’s overrides on the inherited account pages ---------- */
/* Account links are outlined like every other action */
.nav-auth { background: transparent; color: var(--accent-2) !important; border: 1px solid var(--line); }
.nav-auth:hover { background: var(--accent); border-color: var(--accent); color: var(--ink) !important; }
.page-account .nav-logo img { height: 44px; }
.auth-card { border-radius: 26px; box-shadow: none; }
.auth-logo { width: 120px; height: auto; border-radius: 0; }
.auth-card .section-title { font-size: 30px; }
.member-card, .res-card, .deal-card, .deals-empty { box-shadow: none; }
.promo-banner { background: var(--accent); }
.promo-notice { background: var(--accent); color: var(--ink); }
.boot-mark img { width: 70px; height: auto; border-radius: 0; }
.timepick-btn { background: transparent; border: 0; border-bottom: 1px solid rgba(24, 17, 15, 0.35); color: rgba(24, 17, 15, 0.55); padding: 10px 2px; font-size: 16px; }
.timepick-btn.chosen { color: var(--ink); }
.timepick-btn:hover, .timepick-btn.open { border-color: var(--oxblood); }
.timepick-btn svg { fill: #8a6326; }
.timepick-btn .tp-caret { border-top-color: var(--ink); }
.timepick-panel { background: var(--cream); border: 1px solid rgba(160, 118, 52, 0.5); border-radius: 12px; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.3); }
.timepick-slot { background: rgba(24, 17, 15, 0.05); color: var(--ink); border-radius: 999px; }
.timepick-slot:hover { background: rgba(207, 168, 98, 0.35); color: var(--ink); border-color: transparent; }
.timepick-slot.on { background: var(--ink); color: var(--accent-2); border-color: var(--ink); }
.field-note { color: rgba(200, 186, 164, 0.7); }

/* ---------- Online booking switched off in the panel ----------
   Every invitation to book comes down, not only the form, so nothing is left
   pointing at a section that is no longer on the page. 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; }
.reserve-panel .field-note { color: rgba(24, 17, 15, 0.55); font-size: 12px; }