/* Tony Hall design system.
   Taken off the house's own logo: a baroque cameo printed in taupe gold on
   cream paper. The ground is that paper, the type is espresso, the gold is
   kept for rules and ornaments, and the one strong colour is Negroni red,
   which marks every action. Pistachio is the aperitivo hour.

   Gilda Display for titles, Petit Formal Script for the written word (the
   logo's copperplate), Rethink Sans for everything spoken plainly.

   Frames are cartouches: rectangles with the corners scooped inwards, as on
   an Italian menu card, ringed by a hairline set inside the edge. The beaded
   arc over the cameo becomes the dotted rule; the crown and the flourish of
   the logo are the only ornaments. Nothing has a hard shadow. */

:root {
  --cream: #f4eee4;       /* the logo's paper */
  --paper: #fbf8f2;
  --linen: #ece4d6;
  --ink: #2b211c;         /* espresso */
  --para: #5a4c42;
  --taupe: #a88e6a;       /* the logo's gold: rules and ornaments only */
  --taupe-text: #6e5638;  /* the same gold, dark enough to be read on cream */
  --taupe-light: #d4c2a2; /* the gold on the night ground */
  --red: #b8432a;         /* Negroni. Every action is this colour */
  --red-deep: #96331f;
  --pistachio: #dde2c8;
  --pistachio-deep: #c5cca6;
  --night: #1e1814;
  --night-2: #261e19;
  --on-night: #efe6d6;
  --on-night-para: #c9bba6;
  --line: rgba(168, 142, 106, 0.42);
  --line-soft: rgba(43, 33, 28, 0.12);
  --sans: 'Rethink Sans', 'Segoe UI', system-ui, sans-serif;
  --display: 'Gilda Display', 'Times New Roman', Georgia, serif;
  --script: 'Petit Formal Script', 'Gilda Display', cursive;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --scoop: 22px;
  /* The beaded rule: the dotted arc over the cameo, laid flat */
  --beads: radial-gradient(circle, var(--taupe) 1.6px, transparent 2px) center / 12px 6px repeat-x;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--cream); }
body {
  background: var(--cream);
  color: var(--para);
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  counter-reset: act;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
::selection { background: var(--red); color: var(--paper); }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

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

.kicker {
  display: block;
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--taupe-text);
}
.section-title {
  font-size: clamp(40px, 5.4vw, 76px);
  margin: 12px 0 18px;
  letter-spacing: -0.01em;
}
/* The one word of a title that is written by hand, in the logo's copperplate.
   The script runs small for its size, so it is set larger than the roman. */
.t-script {
  font-family: var(--script);
  font-style: normal;
  font-weight: 400;
  font-size: 0.8em;
  color: var(--red);
  letter-spacing: 0;
  line-height: 1;
  padding: 0 0.06em;
}
.section-sub { color: var(--para); max-width: 540px; font-size: 16px; }

/* A programme, act by act: every section head on the home page is numbered
   in Roman figures between two hairlines. */
.home section .section-head::before {
  counter-increment: act;
  content: counter(act, upper-roman);
  display: block; width: max-content;
  font-family: var(--display); font-size: 15px; letter-spacing: 0.12em; color: var(--taupe-text);
  margin-bottom: 14px; padding-right: 48px;
  background: linear-gradient(var(--taupe), var(--taupe)) right center / 34px 1px no-repeat;
}
/* Centred heads carry a hairline on both sides of the numeral */
.home section .section-head.center::before {
  margin-inline: auto; padding: 0 48px;
  background:
    linear-gradient(var(--taupe), var(--taupe)) left center / 34px 1px no-repeat,
    linear-gradient(var(--taupe), var(--taupe)) right center / 34px 1px no-repeat;
}
.home .reserve-section .section-head::before, .home .contact-band .section-head::before { display: none; }

/* ---------- Layout ---------- */
.container { width: min(1200px, 90vw); margin: 0 auto; }
section { padding: clamp(90px, 10vw, 150px) 0; position: relative; }
.section-head { margin-bottom: clamp(36px, 5vw, 64px); }
.section-head.center { text-align: center; }
.section-head.center .section-sub { margin: 0 auto; }
#about, #spaces, #hours { background: var(--paper); }
#about { border-bottom: 1px solid var(--line-soft); }

/* ---------- Buttons ---------- */
/* Outlined pills. The fill rises from the bottom like wine in a glass. */
.btn {
  position: relative; overflow: hidden;
  display: inline-block;
  padding: 15px 32px;
  border: 1px solid var(--red);
  border-radius: 999px;
  color: var(--red);
  background: transparent;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  isolation: isolate;
  transition: color 0.45s var(--ease), border-color 0.45s var(--ease);
}
.btn::before {
  content: ''; position: absolute; inset: 0; z-index: -1; background: var(--red);
  transform: scaleY(0); transform-origin: bottom; transition: transform 0.5s var(--ease);
}
.btn:hover { color: var(--paper); }
.btn:hover::before { transform: scaleY(1); }
.btn.solid { background: var(--red); color: var(--paper); }
.btn.solid::before { background: var(--red-deep); }
.btn.solid:hover { border-color: var(--red-deep); }
.btn.ghost { border-color: var(--ink); color: var(--ink); }
.btn.ghost::before { background: var(--ink); }
.btn.ghost:hover { color: var(--paper); }
.btn:disabled { opacity: 0.5; pointer-events: none; }

/* ---------- Nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  padding: 20px 0;
  transition: background 0.45s, padding 0.45s, box-shadow 0.45s;
}
.nav.scrolled {
  background: rgba(244, 238, 228, 0.94); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  padding: 8px 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: grid; align-items: center; }
.nav-logo img { grid-area: 1 / 1; height: 50px; width: auto; min-width: 112px; transition: height .35s var(--ease), opacity .35s; }
.nav.scrolled .nav-logo img { height: 42px; min-width: 94px; }
/* Over the film the wordmark is cream; once the bar turns to paper it is ink */
.nav-logo .wm-dark { opacity: 0; }
.nav.scrolled .nav-logo .wm-light, .nav.menu-open .nav-logo .wm-light { opacity: 0; }
.nav.scrolled .nav-logo .wm-dark, .nav.menu-open .nav-logo .wm-dark { opacity: 1; }
.nav-links { display: flex; gap: 26px; align-items: center; justify-content: center; list-style: none; grid-column: 2; grid-row: 1; }
.nav-right { display: flex; gap: 14px; 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(--on-night); position: relative; padding: 6px 0; transition: color 0.3s;
}
.nav.scrolled .nav-links a, .nav.scrolled .nav-right a { color: var(--ink); }
/* Three beads under the link, from the arc over the cameo */
.nav-links a::after {
  content: ''; position: absolute; left: 50%; bottom: -5px; width: 22px; height: 4px;
  background: radial-gradient(circle, currentColor 1.5px, transparent 2px) center / 8px 4px repeat-x;
  transform: translateX(-50%) scaleX(0); transition: transform 0.35s var(--ease);
}
.nav-links a:hover::after { transform: translateX(-50%) scaleX(1); }
.nav-links > li > a, .nav-right > li > a { white-space: nowrap; }
.nav-cta { border: 1px solid currentColor; border-radius: 999px; padding: 10px 20px !important; }
.nav-cta:hover { background: var(--red); border-color: var(--red); color: var(--paper) !important; }

.lang-switch { position: relative; display: flex; padding: 3px; border: 1px solid rgba(239, 230, 214, 0.35); border-radius: 999px; }
.nav.scrolled .lang-switch, body:not(.home) .lang-switch, .nav-links .lang-switch { border-color: var(--line); }
.lang-switch::before {
  content: ''; position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px);
  background: var(--red); 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(--on-night);
  font-size: 10.5px; letter-spacing: 0.12em; padding: 6px 13px; border-radius: 999px; transition: color 0.3s;
}
.nav.scrolled .lang-switch button, body:not(.home) .lang-switch button, .nav-links .lang-switch button { color: var(--para); }
.lang-switch button.active, .nav.scrolled .lang-switch button.active,
body:not(.home) .lang-switch button.active, .nav-links .lang-switch button.active { color: var(--paper); }

.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(--on-night); transition: 0.35s var(--ease); }
.nav.scrolled .burger span, .nav.menu-open .burger span, body:not(.home) .burger span { background: var(--ink); }
.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: var(--paper); border: 1px solid var(--red); color: var(--red);
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  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(--red); color: var(--paper); }

/* ---------- Cartouche frames ---------- */
/* The corners are scooped out of the picture with a mask, and a hairline set
   9px inside the edge follows the same outline: four straight runs and four
   quarter arcs, all drawn with gradients so it scales with the frame. */
.cartouche {
  position: relative; overflow: hidden; isolation: isolate;
  -webkit-mask:
    radial-gradient(circle var(--scoop) at 0 0, transparent 98%, #000) top left / 51% 51% no-repeat,
    radial-gradient(circle var(--scoop) at 100% 0, transparent 98%, #000) top right / 51% 51% no-repeat,
    radial-gradient(circle var(--scoop) at 0 100%, transparent 98%, #000) bottom left / 51% 51% no-repeat,
    radial-gradient(circle var(--scoop) at 100% 100%, transparent 98%, #000) bottom right / 51% 51% no-repeat;
          mask:
    radial-gradient(circle var(--scoop) at 0 0, transparent 98%, #000) top left / 51% 51% no-repeat,
    radial-gradient(circle var(--scoop) at 100% 0, transparent 98%, #000) top right / 51% 51% no-repeat,
    radial-gradient(circle var(--scoop) at 0 100%, transparent 98%, #000) bottom left / 51% 51% no-repeat,
    radial-gradient(circle var(--scoop) at 100% 100%, transparent 98%, #000) bottom right / 51% 51% no-repeat;
}
.cartouche > img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--ease); }
.cartouche::after {
  --r: var(--scoop);
  content: ''; position: absolute; inset: 9px; z-index: 3; pointer-events: none;
  background:
    linear-gradient(var(--frame, rgba(251, 248, 242, 0.85)), var(--frame, rgba(251, 248, 242, 0.85))) top center / calc(100% - 2 * var(--r)) 1px no-repeat,
    linear-gradient(var(--frame, rgba(251, 248, 242, 0.85)), var(--frame, rgba(251, 248, 242, 0.85))) bottom center / calc(100% - 2 * var(--r)) 1px no-repeat,
    linear-gradient(var(--frame, rgba(251, 248, 242, 0.85)), var(--frame, rgba(251, 248, 242, 0.85))) left center / 1px calc(100% - 2 * var(--r)) no-repeat,
    linear-gradient(var(--frame, rgba(251, 248, 242, 0.85)), var(--frame, rgba(251, 248, 242, 0.85))) right center / 1px calc(100% - 2 * var(--r)) no-repeat,
    radial-gradient(circle var(--r) at 0 0, transparent calc(100% - 1px), var(--frame, rgba(251, 248, 242, 0.85)) calc(100% - 1px), var(--frame, rgba(251, 248, 242, 0.85)) 100%, transparent 100%) top left / var(--r) var(--r) no-repeat,
    radial-gradient(circle var(--r) at 100% 0, transparent calc(100% - 1px), var(--frame, rgba(251, 248, 242, 0.85)) calc(100% - 1px), var(--frame, rgba(251, 248, 242, 0.85)) 100%, transparent 100%) top right / var(--r) var(--r) no-repeat,
    radial-gradient(circle var(--r) at 0 100%, transparent calc(100% - 1px), var(--frame, rgba(251, 248, 242, 0.85)) calc(100% - 1px), var(--frame, rgba(251, 248, 242, 0.85)) 100%, transparent 100%) bottom left / var(--r) var(--r) no-repeat,
    radial-gradient(circle var(--r) at 100% 100%, transparent calc(100% - 1px), var(--frame, rgba(251, 248, 242, 0.85)) calc(100% - 1px), var(--frame, rgba(251, 248, 242, 0.85)) 100%, transparent 100%) bottom right / var(--r) var(--r) no-repeat;
}
/* A red curtain rises off each picture the first time it comes into view.
   The figure is what is observed; the curtain is only its pseudo-element,
   so the observed box is never clipped to nothing. */
.reveal.cartouche::before, .reveal .cartouche::before {
  content: ''; position: absolute; inset: 0; z-index: 2; background: var(--red);
  transform-origin: top; transform: scaleY(1); transition: transform 1.25s var(--ease) 0.15s;
}
.reveal.visible.cartouche::before, .reveal.visible .cartouche::before { transform: scaleY(0); }
.reveal.cartouche > img, .reveal .cartouche > img { transform: scale(1.12); }
.reveal.visible.cartouche > img, .reveal.visible .cartouche > img { transform: scale(1); }
.cartouche:hover > img { transform: scale(1.04); }

/* ---------- Hero ---------- */
.hero {
  height: 100svh; min-height: 700px; position: relative; overflow: hidden; padding: 0;
  display: grid; place-items: center; text-align: center;
}
.hero-bg { position: absolute; inset: 0; background: var(--night); }
.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); } }
.hero-bg::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(30, 24, 20, 0.62), rgba(30, 24, 20, 0.12) 26%, rgba(30, 24, 20, 0.12) 70%, rgba(30, 24, 20, 0.7));
}
/* The house's card, laid on the table: paper with scooped corners */
.hero-card {
  --scoop: 30px;
  position: relative; z-index: 2; width: min(560px, 88vw);
  margin-top: 40px;
  background: rgba(251, 248, 242, 0.93);
  padding: clamp(28px, 4vw, 44px) clamp(24px, 4vw, 52px) clamp(30px, 4vw, 46px);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  -webkit-mask:
    radial-gradient(circle var(--scoop) at 0 0, transparent 98%, #000) top left / 51% 51% no-repeat,
    radial-gradient(circle var(--scoop) at 100% 0, transparent 98%, #000) top right / 51% 51% no-repeat,
    radial-gradient(circle var(--scoop) at 0 100%, transparent 98%, #000) bottom left / 51% 51% no-repeat,
    radial-gradient(circle var(--scoop) at 100% 100%, transparent 98%, #000) bottom right / 51% 51% no-repeat;
          mask:
    radial-gradient(circle var(--scoop) at 0 0, transparent 98%, #000) top left / 51% 51% no-repeat,
    radial-gradient(circle var(--scoop) at 100% 0, transparent 98%, #000) top right / 51% 51% no-repeat,
    radial-gradient(circle var(--scoop) at 0 100%, transparent 98%, #000) bottom left / 51% 51% no-repeat,
    radial-gradient(circle var(--scoop) at 100% 100%, transparent 98%, #000) bottom right / 51% 51% no-repeat;
  animation: cardIn 1.3s var(--ease) both;
}
.hero-card::after { content: ''; position: absolute; inset: 10px; border: 1px solid var(--line); pointer-events: none;
  -webkit-mask: inherit; mask: inherit; }
@keyframes cardIn { from { opacity: 0; transform: translateY(26px) scale(0.98); } to { opacity: 1; transform: none; } }
.hero-content { position: relative; }
.hero-logo { width: clamp(150px, 19vw, 210px); height: auto; margin: 0 auto; }
.hero-tag {
  margin-top: 12px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.42em; text-indent: 0.42em;
  text-transform: uppercase; color: var(--taupe-text);
}
.hero-script {
  margin: 16px auto 0;
  font-size: clamp(28px, 3.4vw, 42px);
  line-height: 1.14; color: var(--ink); max-width: 17ch; text-wrap: balance;
}
.hero-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 28px; }
.hero-actions .btn { padding: 14px 26px; }
.hero-content > * { opacity: 0; transform: translateY(14px); animation: heroIn 1.1s var(--ease) forwards; }
.hero-content > *:nth-child(1) { animation-delay: 0.35s; }
.hero-content > *:nth-child(2) { animation-delay: 0.5s; }
.hero-content > *:nth-child(3) { animation-delay: 0.62s; }
.hero-content > *:nth-child(4) { animation-delay: 0.75s; }
@keyframes heroIn { to { opacity: 1; transform: none; } }
@keyframes navItemIn { to { opacity: 1; transform: none; } }

.hero-foot {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: clamp(20px, 4vh, 38px);
  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(--on-night);
}
.hero-hours { display: inline-flex; align-items: center; gap: 14px; }
.hero-hours b { font-family: var(--display); font-weight: 400; font-size: 19px; letter-spacing: 0.04em; color: var(--on-night); }
.hero-hours i { display: block; width: 60px; height: 6px; background: radial-gradient(circle, var(--taupe-light) 1.4px, transparent 1.8px) center / 10px 6px repeat-x; }
@media (max-width: 700px) {
  .hero-foot { justify-content: center; }
  .hero-where { display: none; }
}

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(28px); 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; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .reveal-left { opacity: 1; transform: none; transition: none; }
  .reveal.cartouche::before, .reveal .cartouche::before { display: 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 80px; }
.frame-main { width: 78%; aspect-ratio: 4 / 5; --scoop: 34px; }
.frame-accent { position: absolute; right: 0; bottom: 0; width: 44%; aspect-ratio: 3 / 4; --scoop: 20px; outline: 10px solid var(--paper); }
.about-text p { color: var(--para); margin: 22px 0; font-size: 16.5px; max-width: 52ch; }
.about-text .section-head { margin-bottom: 0; }
.about-sign img { width: 92px; height: auto; margin-top: 8px; }

/* ---------- Aperitivo ---------- */
/* The awning over a café terrace: pistachio and cream, scalloped along its
   edge, and the card of small plates hung beneath it. */
.afterwork {
  background: var(--pistachio);
  color: var(--ink);
  padding-top: clamp(120px, 12vw, 170px);
}
.afterwork::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 64px;
  background:
    radial-gradient(circle at 50% 0, transparent 0, transparent 0) ,
    repeating-linear-gradient(90deg, var(--pistachio-deep) 0 48px, var(--paper) 48px 96px);
  -webkit-mask: radial-gradient(circle 24px at 24px 40px, #000 98%, transparent) 0 0 / 48px 64px repeat-x,
                linear-gradient(#000, #000) top / 100% 40px no-repeat;
          mask: radial-gradient(circle 24px at 24px 40px, #000 98%, transparent) 0 0 / 48px 64px repeat-x,
                linear-gradient(#000, #000) top / 100% 40px no-repeat;
}
.afterwork-inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 7vw, 110px); align-items: center; }
.afterwork .kicker { color: var(--taupe-text); }
.afterwork .section-title { margin-bottom: 6px; }
.afterwork-copy p { color: var(--para); margin-bottom: 22px; max-width: 44ch; }
.afterwork-time { font-family: var(--display); font-size: 22px; color: var(--ink) !important; margin: 0 0 14px !important; }
.afterwork-list {
  --scoop: 22px;
  background: var(--paper); padding: 30px clamp(22px, 3vw, 40px);
  -webkit-mask:
    radial-gradient(circle var(--scoop) at 0 0, transparent 98%, #000) top left / 51% 51% no-repeat,
    radial-gradient(circle var(--scoop) at 100% 0, transparent 98%, #000) top right / 51% 51% no-repeat,
    radial-gradient(circle var(--scoop) at 0 100%, transparent 98%, #000) bottom left / 51% 51% no-repeat,
    radial-gradient(circle var(--scoop) at 100% 100%, transparent 98%, #000) bottom right / 51% 51% no-repeat;
          mask:
    radial-gradient(circle var(--scoop) at 0 0, transparent 98%, #000) top left / 51% 51% no-repeat,
    radial-gradient(circle var(--scoop) at 100% 0, transparent 98%, #000) top right / 51% 51% no-repeat,
    radial-gradient(circle var(--scoop) at 0 100%, transparent 98%, #000) bottom left / 51% 51% no-repeat,
    radial-gradient(circle var(--scoop) at 100% 100%, transparent 98%, #000) bottom right / 51% 51% no-repeat;
}
.afterwork-list:empty { display: none; }
.aw-row { display: flex; align-items: baseline; gap: 12px; padding: 9px 0; }
.aw-row + .aw-row { border-top: 1px solid var(--line-soft); }
.aw-name { font-family: var(--display); font-size: 19px; color: var(--ink); }
.aw-dots { flex: 1; border-bottom: 1px dotted var(--taupe); transform: translateY(-5px); }
.aw-price { font-family: var(--sans); font-weight: 600; font-size: 14.5px; color: var(--red); white-space: nowrap; letter-spacing: 0.04em; }
@media (max-width: 900px) { .afterwork-inner { grid-template-columns: 1fr; } }

/* ---------- Menu ---------- */
.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-head { margin-bottom: 26px; }
.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); color: var(--para); border-radius: 999px;
  padding: 11px 26px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; transition: 0.35s;
}
.menu-tabs button:hover { border-color: var(--ink); color: var(--ink); }
.menu-tabs button.active { border-color: var(--ink); color: var(--paper); background: var(--ink); }
.menu-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(34px, 3.4vw, 54px) 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; }
}
/* Each category opens under a beaded rule, like a page of the printed card */
.menu-cat h3 {
  font-family: var(--display); font-size: 27px; color: var(--ink);
  padding-top: 18px; margin-bottom: 10px;
  background: var(--beads); background-position: left top; background-size: 12px 6px; background-repeat: repeat-x;
}
.menu-cat-sub { font-family: var(--sans); font-style: italic; color: var(--taupe-text); font-size: 14.5px; margin: -4px 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: 500; color: var(--ink); white-space: nowrap; }
.menu-item .mi-dots { flex: 1; border-bottom: 1px dotted rgba(168, 142, 106, 0.7); transform: translateY(-5px); }
.menu-item .mi-price { font-family: var(--sans); font-weight: 600; color: var(--red); font-size: 14.5px; letter-spacing: 0.03em; white-space: nowrap; }
.menu-item-desc { color: var(--para); 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: #25d366; border-color: #1fae55; color: #063b20; }
.btn.wa-btn::before { background: #1fae55; }
.btn.wa-btn:hover { color: #052a17; }
.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: 600; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 10px 16px; min-height: 44px; color: var(--para);
  border-bottom: 1px solid transparent; transition: color .3s var(--ease), border-color .3s var(--ease);
}
.carte-lang button + button { border-left: 1px solid var(--line); }
.carte-lang button:hover { color: var(--ink); }
.carte-lang button.active { color: var(--red); border-bottom-color: var(--red); }
@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 */
.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-weight: 500; font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--taupe-text);
}

.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; }

/* ---------- Rooms: four cartouches with a label underneath, as in a museum ---------- */
.spaces-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2.2vw, 30px); }
.space-card .cartouche { aspect-ratio: 3 / 4.4; --scoop: 26px; }
.space-card:nth-child(even) { margin-top: 56px; }
.space-card figcaption { padding: 18px 4px 0; text-align: center; font-family: var(--display); font-size: clamp(21px, 1.9vw, 27px); color: var(--ink); line-height: 1.2; }
.space-card figcaption small:empty { display: none; }
.space-card figcaption small { display: block; font-family: var(--sans); font-size: 14px; color: var(--para); margin-top: 6px; line-height: 1.5; }

/* ---------- La galleria: a salon hang of frames of every size ---------- */
.gallery-section { background: var(--cream); }
.gal-grid {
  display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: clamp(120px, 12vw, 180px);
  grid-template-areas:
    "a a b b c c"
    "a a b b d d"
    "e e e f f g"
    "h h h f f g";
  gap: clamp(12px, 1.6vw, 22px);
}
.gal-tile { position: relative; border: 0; padding: 0; background: var(--linen); cursor: zoom-in; --scoop: 18px; --frame: rgba(251, 248, 242, 0.9); }
.gal-tile img { filter: saturate(0.95); }
.gal-tile:hover img { transform: scale(1.05); filter: saturate(1.05); }
.gal-1 { grid-area: a; } .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; } .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: 44vw;
    grid-template-areas: "a b" "a c" "d d" "e f" "g f" "h h"; }
}

/* ---------- Welcome pop-up ---------- */
.welcome-pop {
  position: fixed; inset: 0; z-index: 130; display: grid; place-items: center; padding: 24px;
  background: rgba(30, 24, 20, 0.72); 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(--paper);
  border: 1px solid var(--line); border-radius: 6px; 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: 3px; }
.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(--paper); border: 1px solid var(--line); color: var(--ink); 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(--red); border-color: var(--red); }
@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(30, 24, 20, 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 rgba(212, 194, 162, 0.5); border-radius: 50%; color: var(--on-night);
  width: 48px; height: 48px; font-size: 18px; transition: 0.3s; display: grid; place-items: center;
}
.lightbox button:hover { border-color: var(--red); background: var(--red); }
.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: 11px 0; border-bottom: 1px solid var(--line-soft); font-size: 15px; }
.hours-list .day-col { min-width: 150px; display: flex; flex-direction: column; gap: 1px; }
.hours-list .day { font-family: var(--display); font-size: 19px; color: var(--ink); }
.hours-list .day-note { font-size: 13.5px; color: var(--taupe-text); }
.hours-list .dots { flex: 1; border-bottom: 1px dotted var(--taupe); transform: translateY(-5px); }
.hours-list .time { color: var(--ink); letter-spacing: 0.06em; font-size: 14.5px; font-weight: 500; }
.hours-list .closed { color: var(--red); font-weight: 500; }
.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: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--taupe-text); }
.contact-lines a { color: var(--ink); border-bottom: 1px solid var(--line); }
.contact-lines a:hover { color: var(--red); border-color: var(--red); }
.map-wrap { min-height: 440px; --scoop: 36px; --frame: rgba(168, 142, 106, 0.8); }
.map-wrap.reveal::before { display: none; }
#map { position: absolute !important; inset: 0; z-index: 1; filter: sepia(0.28) saturate(0.85) brightness(1.02); }
.map-pin { position: relative; width: 22px; height: 22px; }
.map-pin::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--red); border: 3px solid var(--paper); }
.map-pin::after { content: ''; position: absolute; inset: -12px; border-radius: 50%; border: 2px solid var(--red); 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(--paper); color: var(--ink); }
.leaflet-popup-content a { color: var(--red); font-weight: 600; }

/* ---------- Contact: the room after dark ---------- */
.contact-band {
  background:
    linear-gradient(180deg, rgba(30, 24, 20, 0.9), rgba(30, 24, 20, 0.95)),
    url('/images/contact-bg.jpg') center / cover no-repeat;
  color: var(--on-night-para);
}
.contact-band::before {
  content: ''; position: absolute; left: 50%; top: clamp(44px, 5vw, 70px); transform: translateX(-50%);
  width: 130px; height: 45px; background: url('/images/crown-cream.png') center / contain no-repeat; opacity: 0.7;
}
.contact-inner { text-align: center; max-width: 1080px; margin: 0 auto; padding-top: 40px; }
.contact-band .kicker { color: var(--taupe-light); }
.contact-band .section-title { font-size: clamp(38px, 5vw, 68px); color: var(--on-night); }
.contact-band .t-script { color: #e78a6c; }
.contact-lead { color: var(--on-night-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 rgba(212, 194, 162, 0.35); border-bottom: 1px solid rgba(212, 194, 162, 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(212, 194, 162, 0.2); }
a.contact-card:hover { background: rgba(239, 230, 214, 0.05); }
.cc-icon { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(212, 194, 162, 0.55); }
.cc-icon svg { width: 15px; height: 15px; fill: var(--taupe-light); }
.cc-body { display: grid; gap: 4px; min-width: 0; }
.cc-body small { font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--taupe-light); }
.cc-body b { font-weight: 400; font-size: 15px; color: var(--on-night); 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(239, 230, 214, 0.6); color: var(--on-night); }
.contact-band .btn.ghost::before { background: var(--on-night); }
.contact-band .btn.ghost:hover { color: var(--ink); }
.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(212, 194, 162, 0.2); }
  .contact-actions .btn { width: 100%; }
}

/* ---------- Reservation: a theatre ticket ---------- */
/* Scooped corners, two notches where the stub is torn off, and a perforation
   of beads between the stub and the form. */
.reserve-section { background: var(--cream); }
.reserve-panel {
  --notch: 18px;
  position: relative; max-width: 760px; margin: 0 auto;
  background: var(--paper);
  padding: clamp(46px, 6vw, 70px) clamp(26px, 6vw, 72px) clamp(40px, 5vw, 56px);
  -webkit-mask:
    radial-gradient(circle 26px at 0 0, transparent 98%, #000) top left / 51% 51% no-repeat,
    radial-gradient(circle 26px at 100% 0, transparent 98%, #000) top right / 51% 51% no-repeat,
    radial-gradient(circle 26px at 0 100%, transparent 98%, #000) bottom left / 51% 51% no-repeat,
    radial-gradient(circle 26px at 100% 100%, transparent 98%, #000) bottom right / 51% 51% no-repeat;
          mask:
    radial-gradient(circle 26px at 0 0, transparent 98%, #000) top left / 51% 51% no-repeat,
    radial-gradient(circle 26px at 100% 0, transparent 98%, #000) top right / 51% 51% no-repeat,
    radial-gradient(circle 26px at 0 100%, transparent 98%, #000) bottom left / 51% 51% no-repeat,
    radial-gradient(circle 26px at 100% 100%, transparent 98%, #000) bottom right / 51% 51% no-repeat;
  border-top: 3px solid var(--red);
}
.ticket-stub { position: relative; padding-bottom: 34px; margin-bottom: 0 !important; }
.ticket-stub::after {
  content: ''; position: absolute; left: calc(-1 * clamp(26px, 6vw, 72px)); right: calc(-1 * clamp(26px, 6vw, 72px)); bottom: 0; height: 6px;
  background: radial-gradient(circle, var(--taupe) 1.6px, transparent 2px) center / 12px 6px repeat-x;
}
.reserve-panel .kicker { color: var(--taupe-text); }
.reserve-panel .section-title { font-size: clamp(36px, 4.6vw, 58px); }
.reserve-panel .section-sub { color: var(--para); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 28px; margin-top: 34px; position: relative; }
.form-field { display: grid; gap: 6px; }
.form-field.full { grid-column: 1 / -1; }
.form-field label { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.22em; color: var(--taupe-text); }
.form-field input, .form-field select {
  background: transparent; border: 0; border-bottom: 1px solid rgba(43, 33, 28, 0.35);
  color: var(--ink); padding: 10px 2px; font-family: var(--sans); font-size: 16px;
  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(--red); }
.form-field input::placeholder { color: rgba(43, 33, 28, 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% - 14px) 55%, calc(100% - 9px) 55%; background-size: 5px 5px; background-repeat: no-repeat;
}
.form-field select option { background: var(--paper); 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(--para); 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: #3d6b3a; }
.form-msg.err { display: block; color: var(--red); }
.reserve-panel .prefill-note { color: var(--taupe-text); }
.reserve-panel .field-note { color: var(--para); font-size: 12px; }

/* ---------- Footer ---------- */
footer { background: var(--night); color: var(--on-night-para); 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: 600; letter-spacing: 0.28em; text-transform: uppercase; margin-bottom: 18px; color: var(--taupe-light); }
.footer-grid p, .footer-grid a, .footer-grid li { color: var(--on-night-para); font-size: 14px; list-style: none; }
.footer-grid p { max-width: 38ch; }
.footer-grid a:hover { color: var(--on-night); }
.footer-grid ul { display: grid; gap: 9px; }
.footer-logo { width: 150px; height: auto; margin-bottom: 18px; }
/* The name once more, the logo's own script as large as the page allows */
.footer-word { margin: 30px auto 26px; display: flex; justify-content: center; opacity: 0.16; user-select: none; }
.footer-word img { width: min(980px, 92%); height: auto; }
.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 rgba(212, 194, 162, 0.2); padding-top: 24px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; color: var(--on-night-para); font-size: 12px; letter-spacing: 0.06em; }
.footer-bottom a:hover { color: var(--on-night); }

/* ---------- 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(30, 24, 20, 0.66) 0%, rgba(30, 24, 20, 0.4) 50%, rgba(30, 24, 20, 0.72) 100%); }
.hero-video { display: block; }
@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; color: var(--on-night); }
.page-hero .t-script { color: #f0a088; }
.page-hero .kicker { position: relative; z-index: 2; color: var(--taupe-light); }
.legal { max-width: 800px; margin: 0 auto; }
.legal h2 { font-size: 26px; margin: 44px 0 14px; color: var(--ink); }
.legal p, .legal li { color: var(--para); font-size: 15px; margin-bottom: 12px; }
.legal a { color: var(--red); border-bottom: 1px solid currentColor; }
.legal ul { padding-left: 20px; }

.toast {
  position: fixed; bottom: 30px; left: 50%; transform: translate(-50%, 20px);
  background: var(--ink); border-radius: 999px; color: var(--paper);
  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); }
  .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: var(--cream);
    flex-direction: column; justify-content: center; align-items: center; gap: 20px;
    opacity: 0; visibility: hidden;
    transition: opacity 0.45s var(--ease), visibility 0s 0.45s;
    grid-column: auto; grid-row: auto; z-index: 65; list-style: none;
  }
  .nav-links::before {
    content: ''; position: absolute; top: 90px; left: 50%; transform: translateX(-50%);
    width: 150px; height: 52px; background: url('/images/crown.png') center / contain no-repeat;
  }
  .nav-links.open { opacity: 1; visibility: visible; transition: opacity 0.45s var(--ease); }
  .nav-links a, .nav.scrolled .nav-links a { font-family: var(--display); font-size: 30px; letter-spacing: 0; text-transform: none; display: inline-block; color: var(--ink); }
  .nav-links .mobile-only a, .nav.scrolled .nav-links .mobile-only a { font-family: var(--sans); font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--red); }
  .nav-links li { width: 100%; text-align: center; opacity: 0; transform: translateY(16px); }
  .nav-links .lang-switch { display: inline-flex; }
  .nav-links.open li { animation: navItemIn 0.5s var(--ease) forwards; }
  .nav-links.open li:nth-child(1) { animation-delay: 0.08s; }
  .nav-links.open li:nth-child(2) { animation-delay: 0.13s; }
  .nav-links.open li:nth-child(3) { animation-delay: 0.18s; }
  .nav-links.open li:nth-child(4) { animation-delay: 0.23s; }
  .nav-links.open li:nth-child(5) { animation-delay: 0.28s; }
  .nav-links.open li:nth-child(6) { animation-delay: 0.33s; }
  .nav-links.open li:nth-child(n+7) { animation-delay: 0.4s; }
  .nav-right { display: none; }
  .nav-links .mobile-only { display: block; }
  .burger { display: block; }
  .nav-simple .nav-links {
    position: static; height: auto; background: none; opacity: 1; visibility: visible;
    flex-direction: row; gap: 18px; z-index: auto;
  }
  .nav-simple .nav-links::before { display: none; }
  .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 { min-height: 360px; }
  .footer-grid { grid-template-columns: 1fr; gap: 34px; }
}
@media (min-width: 1261px) { .nav-links .mobile-only { display: none; } }
@media (max-width: 560px) {
  .spaces-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
  .space-card:nth-child(even) { margin-top: 34px; }
  .space-card .cartouche { --scoop: 16px; }
  .space-card figcaption { font-size: 19px; padding-top: 12px; }
  .space-card figcaption small { font-size: 12.5px; }
  .hero-actions .btn { width: 100%; text-align: center; }
  .hero-tag { letter-spacing: 0.3em; text-indent: 0.3em; }
  .hero-card { --scoop: 20px; margin-top: 30px; }
  .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; }
  .frame-main { --scoop: 22px; }
}
@media (max-height: 760px) and (min-width: 700px) {
  .hero-logo { width: 130px; }
  .hero-script { font-size: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal, .reveal-left { opacity: 1; transform: none; }
  .hero-content > * { opacity: 1; transform: none; }
}

/* ---------- Account (sign in, sign up, member area) ---------- */
.nav-auth {
  background: transparent; color: var(--on-night) !important; border: 1px solid rgba(239, 230, 214, 0.45);
  border-radius: 999px; padding: 10px 20px !important; letter-spacing: 0.14em;
  transition: background .3s, color .3s, border-color .3s;
}
.nav.scrolled .nav-auth, body:not(.home) .nav-auth { color: var(--ink) !important; border-color: var(--line); }
.nav-auth:hover, .nav.scrolled .nav-auth:hover, body:not(.home) .nav-auth:hover { background: var(--red); border-color: var(--red); color: var(--paper) !important; }
.nav-auth.signed-in { color: var(--red) !important; }
body:not(.home) .nav-links a, body:not(.home) .nav-right a { color: var(--ink); }
/* Only the home page opens on its film; every other page has the paper bar
   from the first pixel, so its ink links never sit on a dark picture */
body:not(.home) .nav {
  background: rgba(244, 238, 228, 0.95); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--line);
}
body:not(.home) .nav.menu-open { background: transparent; box-shadow: none; backdrop-filter: none; }

.page-account { background: var(--cream); }
.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(244, 238, 228, 0.86), rgba(244, 238, 228, 0.93));
}
.page-account .nav {
  background: rgba(244, 238, 228, 0.95); backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--line); padding: 10px 0;
}
.page-account .nav-logo img, body:not(.home) .nav-logo img { height: 44px; }
body:not(.home) .nav-logo .wm-light { opacity: 0; }
body:not(.home) .nav-logo .wm-dark { opacity: 1; }
.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 { margin-top: 0; }
.account-main section { padding: 0; }
.auth-wrap { display: flex; justify-content: center; width: 100%; }
.auth-card {
  width: min(560px, 100%); background: var(--paper); border: 1px solid var(--line);
  border-top: 3px solid var(--red);
  border-radius: 4px; padding: 30px 32px; text-align: center;
}
.auth-logo { display: block; width: 110px; height: auto; margin: 0 auto 8px; }
.auth-card .section-title { font-size: 30px; margin-bottom: 4px; }
.auth-sub { color: var(--para); font-size: 13px; line-height: 19px; margin-bottom: 12px; }
.auth-form { display: grid; gap: 6px; text-align: left; }
#signupForm { grid-template-columns: 1fr 1fr; column-gap: 14px; }
#signupForm .full { grid-column: 1 / -1; }
.auth-form label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.15em; color: var(--taupe-text); margin-top: 6px; }
.auth-form input, .auth-form select {
  width: 100%; background: var(--cream); border: 1px solid var(--line-soft);
  border-radius: 6px; padding: 11px 13px; color: var(--ink);
  font-family: var(--sans); font-size: 14.5px;
}
.auth-form input:focus, .auth-form select:focus { outline: none; border-color: var(--red); }
.auth-form .btn { margin-top: 14px; width: 100%; }
.auth-form .btn.ghost { margin-top: 8px; }
.auth-hint { font-size: 10.5px; color: var(--para); line-height: 16px; margin-top: 4px; }
.gender-row { display: flex; gap: 8px; }
.gender-row button {
  flex: 1; background: var(--cream); border: 1px solid var(--line-soft); border-radius: 6px;
  color: var(--para); padding: 9px 6px; font-size: 13px; font-family: var(--sans); transition: .25s;
}
.gender-row button:hover { border-color: var(--red); }
.gender-row button.active { border-color: var(--red); background: rgba(184, 67, 42, 0.08); color: var(--red); }
.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: var(--red); }
.auth-msg.ok { color: #3d6b3a; }
.auth-switch { font-size: 13px; color: var(--para); text-align: center; margin-top: 10px; grid-column: 1 / -1; }
.auth-switch a { color: var(--red); text-decoration: underline; }
.pending-title { font-family: var(--display); font-size: 24px; color: var(--ink); margin-bottom: 8px; }

.member-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; margin: 26px 0 40px; }
.member-card { background: var(--paper); border: 1px solid var(--line); border-radius: 4px; padding: 26px; }
.member-card h3 { 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: var(--pistachio); border-color: var(--pistachio-deep); }
.fidelity-card .kicker { display: block; margin-bottom: 6px; }
.fidelity-card b { font-family: var(--display); font-size: 54px; font-weight: 400; color: var(--ink); 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; color: var(--ink); margin-bottom: 16px; }
.res-list { display: grid; gap: 12px; }
.res-card { display: flex; align-items: center; gap: 18px; background: var(--paper); border: 1px solid var(--line-soft); border-radius: 4px; padding: 16px 20px; }
.res-when { display: grid; min-width: 88px; }
.res-when b { font-family: var(--display); font-weight: 400; font-size: 20px; color: var(--ink); }
.res-when span { font-size: 12px; color: var(--para); }
.res-meta { display: grid; flex: 1; }
.res-meta b { font-size: 14px; font-weight: 500; color: var(--ink); }
.res-meta span { font-size: 12px; color: var(--para); }
.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(--taupe-text); border-color: var(--taupe); }
.res-badge.confirmed { color: #3d6b3a; border-color: rgba(61, 107, 58, 0.5); }
.res-badge.cancelled { color: var(--red); border-color: rgba(184, 67, 42, 0.5); }

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

.auth-form select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 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(--paper); color: var(--ink); }

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

.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; font-weight: 400;
  color: var(--para); cursor: pointer;
}
.stay-row input { width: 16px; height: 16px; accent-color: var(--red); cursor: pointer; }
.stay-line { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.stay-line .stay-row { margin-top: 12px; }
.forgot-link { margin-top: 12px; font-size: 13px; color: var(--red); text-decoration: underline; white-space: nowrap; }
.forgot-link:hover { color: var(--red-deep); }
.birthday-note {
  font-size: 12px; color: var(--taupe-text); margin-top: 10px; text-align: center;
  background: var(--pistachio); border-radius: 6px; padding: 9px 12px;
}

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

/* ---------- Deals page ---------- */
.deals-main { align-items: flex-start; padding-top: 118px; }
.deals-main .section-head { margin-bottom: 30px; }
.deals-empty { background: var(--paper); border: 1px solid var(--line); border-radius: 4px; padding: 40px 30px; text-align: center; color: var(--para); max-width: 560px; margin: 0 auto; }
.deals-empty .contact-actions { margin-top: 22px; margin-bottom: 0; }
.deal-group { margin-bottom: 40px; }
.deal-group h2 { font-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: var(--paper); border: 1px solid var(--line); border-radius: 4px; padding: 14px;
  transition: transform .3s var(--ease), border-color .3s var(--ease);
}
.deal-card:hover { transform: translateY(-3px); border-color: #3d6b3a; }
.deal-card img { width: 74px; height: 74px; border-radius: 3px; 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; margin-bottom: 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.deal-prices { display: flex; align-items: baseline; gap: 10px; }
.deal-prices s { color: var(--para); opacity: .6; font-size: 13px; }
.deal-prices b { color: #3d6b3a; font-size: 17px; font-weight: 600; }
.deal-badge { position: absolute; top: 12px; right: 12px; background: var(--pistachio); color: #3d6b3a; 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(--sans); font-size: 12px; text-transform: uppercase; letter-spacing: 0.18em; color: var(--taupe-text); 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(--taupe); }
.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; }
.del-card .btn { width: 100%; margin-top: 12px; text-align: center; }
.btn.danger { background: var(--red-deep); border-color: var(--red-deep); color: var(--paper); }
.btn.danger::before { background: var(--ink); }

/* ---------- Reservation time picker ---------- */
.timepick { position: relative; }
.timepick-btn {
  width: 100%; display: flex; align-items: center; gap: 10px;
  background: transparent; border: 0; border-bottom: 1px solid rgba(43, 33, 28, 0.35); color: rgba(43, 33, 28, 0.55);
  padding: 10px 2px; font-family: var(--sans); font-size: 16px; text-align: left; transition: border-color 0.3s, color 0.3s;
}
.timepick-btn:hover, .timepick-btn.open { border-color: var(--red); }
.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(--taupe-text); 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(4, 1fr); gap: 6px; padding: 10px;
  background: var(--paper); border: 1px solid var(--line); border-radius: 6px;
  box-shadow: 0 18px 40px rgba(43, 33, 28, 0.16);
}
.timepick-panel[hidden] { display: none; }
.timepick-slot {
  background: var(--cream); 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;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.timepick-slot:hover { border-color: var(--red); }
.timepick-slot.on { background: var(--red); color: var(--paper); border-color: var(--red); }
.timepick-panel::-webkit-scrollbar { width: 6px; }
.timepick-panel::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }

/* ---------- Boot cover ---------- */
.page-boot { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: var(--cream); transition: opacity .25s ease; }
.page-boot.gone { opacity: 0; pointer-events: none; }
.boot-mark { position: relative; width: 112px; height: 112px; display: grid; place-items: center; }
.boot-mark img { width: 70px; height: auto; }
.boot-ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--line); border-top-color: var(--red); animation: bootSpin .9s linear infinite; }
@keyframes bootSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .boot-ring { animation-duration: 2.4s; } }

/* ---------- Marketing ---------- */
/* Announcement strip above the fixed nav, which promo.js pushes down by the
   measured height. Two identical runs slide half the track, so the seam
   never shows. */
.promo-banner { position: fixed; inset: 0 0 auto 0; z-index: 70; background: var(--red); overflow: hidden; padding: 9px 0; }
.promo-track { display: flex; width: max-content; animation-name: promo-scroll; animation-timing-function: linear; animation-iteration-count: infinite; will-change: transform; }
.promo-banner:hover .promo-track { animation-play-state: paused; }
.promo-banner-text { flex: none; white-space: nowrap; padding-right: 5rem; color: var(--paper); font-weight: 600; font-size: 14px; letter-spacing: 0.08em; text-decoration: none; }
a.promo-banner-text:hover { color: #fff; text-decoration: underline; }
@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(--red); color: var(--paper); font-weight: 600; border-radius: 999px; padding: 11px 26px; text-align: center; font-size: 14.5px; letter-spacing: 0.06em; }
.promo-notice.hidden { display: none; }

.field-note { display: block; margin-top: 6px; font-size: 12.5px; color: var(--para); letter-spacing: 0.03em; }

/* ==========================================================================
   Phones: iPhone and Android
   ========================================================================== */
/* iOS Safari zooms the page in when a focused field is under 16px and does
   not zoom back out. 16px is the threshold, not a preference, so it wins
   over every component rule. */
@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(184, 67, 42, 0.14); }
/* Apple asks for 44x44 and Android for 48dp; the burger itself grows */
@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) {
  .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: 12px; }
  .timepick-panel { max-height: 200px; }
}

/* ---------- Online booking switched off in the panel ----------
   Every invitation to book comes down, not only 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; }

/* ---------- Small pages (were inline styles: the CSP allows none) ---------- */
.page-404 { min-height: 100svh; display: grid; place-items: center; text-align: center; }
.logo-404 { width: 170px; height: auto; margin: 0 auto 30px; }
.sub-404 { margin: 0 auto 34px; }
.legal-page { padding-top: 160px; }

/* ---------- Buttons cut like the house's card ----------
   Every action takes the hero card's outline: a rectangle with its corners
   scooped inwards. The outline is one closed SVG path used as a 9-slice
   border image, so the corners keep their true size and stay joined at any
   zoom or screen scaling; only the straight middles stretch. The mask cuts
   the same corners out of the fill and the hover fill. The 1px border width
   stays, so no button changes size. */
.btn, .nav-cta, .nav-auth, .book-float {
  --bi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath d='M8.5 .5H19.5A8 8 0 0 0 27.5 8.5V19.5A8 8 0 0 0 19.5 27.5H8.5A8 8 0 0 0 .5 19.5V8.5A8 8 0 0 0 8.5 .5Z' fill='none' stroke='%23b8432a' stroke-width='1'/%3E%3C/svg%3E");
  position: relative;
  border-radius: 0 !important;
  border-style: solid;
  border-image-source: var(--bi);
  border-image-slice: 9;
  border-image-width: 9px;
  border-image-repeat: stretch;
  -webkit-mask:
    radial-gradient(circle 8px at 0 0, transparent 7.5px, #000 7.5px) top left / 51% 51% no-repeat,
    radial-gradient(circle 8px at 100% 0, transparent 7.5px, #000 7.5px) top right / 51% 51% no-repeat,
    radial-gradient(circle 8px at 0 100%, transparent 7.5px, #000 7.5px) bottom left / 51% 51% no-repeat,
    radial-gradient(circle 8px at 100% 100%, transparent 7.5px, #000 7.5px) bottom right / 51% 51% no-repeat;
          mask:
    radial-gradient(circle 8px at 0 0, transparent 7.5px, #000 7.5px) top left / 51% 51% no-repeat,
    radial-gradient(circle 8px at 100% 0, transparent 7.5px, #000 7.5px) top right / 51% 51% no-repeat,
    radial-gradient(circle 8px at 0 100%, transparent 7.5px, #000 7.5px) bottom left / 51% 51% no-repeat,
    radial-gradient(circle 8px at 100% 100%, transparent 7.5px, #000 7.5px) bottom right / 51% 51% no-repeat;
}
.btn.solid:hover { --bi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath d='M8.5 .5H19.5A8 8 0 0 0 27.5 8.5V19.5A8 8 0 0 0 19.5 27.5H8.5A8 8 0 0 0 .5 19.5V8.5A8 8 0 0 0 8.5 .5Z' fill='none' stroke='%2396331f' stroke-width='1'/%3E%3C/svg%3E"); }
.btn.ghost { --bi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath d='M8.5 .5H19.5A8 8 0 0 0 27.5 8.5V19.5A8 8 0 0 0 19.5 27.5H8.5A8 8 0 0 0 .5 19.5V8.5A8 8 0 0 0 8.5 .5Z' fill='none' stroke='%232b211c' stroke-width='1'/%3E%3C/svg%3E"); }
.btn.wa-btn { --bi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath d='M8.5 .5H19.5A8 8 0 0 0 27.5 8.5V19.5A8 8 0 0 0 19.5 27.5H8.5A8 8 0 0 0 .5 19.5V8.5A8 8 0 0 0 8.5 .5Z' fill='none' stroke='%231fae55' stroke-width='1'/%3E%3C/svg%3E"); }
.btn.danger { --bi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath d='M8.5 .5H19.5A8 8 0 0 0 27.5 8.5V19.5A8 8 0 0 0 19.5 27.5H8.5A8 8 0 0 0 .5 19.5V8.5A8 8 0 0 0 8.5 .5Z' fill='none' stroke='%2396331f' stroke-width='1'/%3E%3C/svg%3E"); }
.contact-band .btn.ghost { --bi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath d='M8.5 .5H19.5A8 8 0 0 0 27.5 8.5V19.5A8 8 0 0 0 19.5 27.5H8.5A8 8 0 0 0 .5 19.5V8.5A8 8 0 0 0 8.5 .5Z' fill='none' stroke='rgba%28239%2C230%2C214%2C0.6%29' stroke-width='1'/%3E%3C/svg%3E"); }
.contact-band .btn.ghost:hover { --bi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath d='M8.5 .5H19.5A8 8 0 0 0 27.5 8.5V19.5A8 8 0 0 0 19.5 27.5H8.5A8 8 0 0 0 .5 19.5V8.5A8 8 0 0 0 8.5 .5Z' fill='none' stroke='%23efe6d6' stroke-width='1'/%3E%3C/svg%3E"); }
/* The header links sit on the film until the bar turns to paper */
.nav-cta { --bi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath d='M8.5 .5H19.5A8 8 0 0 0 27.5 8.5V19.5A8 8 0 0 0 19.5 27.5H8.5A8 8 0 0 0 .5 19.5V8.5A8 8 0 0 0 8.5 .5Z' fill='none' stroke='%23efe6d6' stroke-width='1'/%3E%3C/svg%3E"); }
.nav-auth { --bi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath d='M8.5 .5H19.5A8 8 0 0 0 27.5 8.5V19.5A8 8 0 0 0 19.5 27.5H8.5A8 8 0 0 0 .5 19.5V8.5A8 8 0 0 0 8.5 .5Z' fill='none' stroke='rgba%28239%2C230%2C214%2C0.45%29' stroke-width='1'/%3E%3C/svg%3E"); }
.nav.scrolled .nav-cta, body:not(.home) .nav-cta { --bi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath d='M8.5 .5H19.5A8 8 0 0 0 27.5 8.5V19.5A8 8 0 0 0 19.5 27.5H8.5A8 8 0 0 0 .5 19.5V8.5A8 8 0 0 0 8.5 .5Z' fill='none' stroke='%232b211c' stroke-width='1'/%3E%3C/svg%3E"); }
.nav.scrolled .nav-auth, body:not(.home) .nav-auth { --bi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath d='M8.5 .5H19.5A8 8 0 0 0 27.5 8.5V19.5A8 8 0 0 0 19.5 27.5H8.5A8 8 0 0 0 .5 19.5V8.5A8 8 0 0 0 8.5 .5Z' fill='none' stroke='rgba%28168%2C142%2C106%2C0.55%29' stroke-width='1'/%3E%3C/svg%3E"); }
.nav-cta:hover, .nav.scrolled .nav-cta:hover, body:not(.home) .nav-cta:hover,
.nav-auth:hover, .nav.scrolled .nav-auth:hover, body:not(.home) .nav-auth:hover { --bi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath d='M8.5 .5H19.5A8 8 0 0 0 27.5 8.5V19.5A8 8 0 0 0 19.5 27.5H8.5A8 8 0 0 0 .5 19.5V8.5A8 8 0 0 0 8.5 .5Z' fill='none' stroke='%23b8432a' stroke-width='1'/%3E%3C/svg%3E"); }