/* ============================================================================
   L’ATELIER SUSHI — Design system
   Read off the Signé branding and the new room: matte slate-charcoal boxes
   with gold foil, caramel leather banquettes, cream walls. Slate ground,
   cream type, champagne gold for everything that should be pressed or should
   catch the eye, caramel as the second colour, and faint gold wave scales
   on the flat bands. Three type colours, the same on every section:
   cream (ink) for headings and names, soft cream (ink-soft) for copy and
   labels, gold for eyebrows, prices and what is pressed.
     paper   #131417  page ground (slate charcoal, the boxes)
     ink     #F2EBDF  cream type      ·  ink-soft #BDB4A6  ·  muted #8A847A
     accent  #C9A45C  champagne gold, the foil — buttons, triangles, prices
     second  #A9693A  caramel, the leather
   Type: Montserrat ExtraBold capitals for headlines, as in their posts;
   Inter for everything read at length.
   ========================================================================== */

/* ---- Tokens ---------------------------------------------------------------*/
:root {
  --accent:      #C9A45C;   /* champagne gold, the foil */
  --accent-deep: #B08D47;
  --gold:        #C9A45C;   /* eyebrows, prices, today's hours */
  --gold-deep:   #A9874A;
  --gold-bright: #E6CB8F;   /* the brightest edge of the foil */
  --second:      #A9693A;   /* caramel, the leather banquettes */
  --paper:       #131417;   /* page ground, slate charcoal */
  --paper-2:     #1C1E22;   /* raised panel */
  --pale:        #2A2D32;   /* dividers / bars */
  --bar:         #0D0E10;   /* floating bar, reviews, footer */
  --ink:         #F2EBDF;   /* cream type */
  --ink-soft:    #BDB4A6;
  --muted:       #8A847A;
  --on-accent:   #15140F;   /* type on gold */
  --line:        rgba(242, 235, 223, 0.13);
  --line-light:  rgba(255, 255, 255, 0.3);

  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Montserrat", "Inter", system-ui, sans-serif;

  --maxw: 1360px;
  --gut:  clamp(20px, 5vw, 72px);
  --nav-h: 74px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---- Reset ----------------------------------------------------------------*/
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; touch-action: manipulation; }   /* no double-tap zoom */
body {
  font-family: var(--font);
  background: var(--paper);
  color: var(--ink);
  font-size: 17px;
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;   /* clip (not hidden) so position: sticky keeps working */
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
[hidden] { display: none !important; }
::selection { background: var(--gold); color: var(--paper); }

/* ---- Typography -----------------------------------------------------------*/
h1, h2, h3, h4 { font-weight: 400; line-height: 1.04; letter-spacing: -0.02em; }
h2.display, h3 { font-family: var(--font-display); }
.display {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2.2rem, 6.6vw, 5.2rem);
  text-transform: uppercase; letter-spacing: -0.01em; line-height: 1;
  text-wrap: balance;
}
.eyebrow {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-weight: 600;
  color: var(--gold);
}
.eyebrow.on-accent { color: rgba(255,255,255,0.85); }
.lede { font-size: clamp(1.15rem, 2.2vw, 1.7rem); line-height: 1.4; letter-spacing: -0.01em; }

.container { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }
section { position: relative; }
.section-pad { padding-block: clamp(40px, 5vw, 72px); }

/* language visibility helpers (set on <html data-lang>) */
[data-l="fr"], [data-l="en"] { display: none; }
html[data-lang="fr"] [data-l="fr"] { display: revert; }
html[data-lang="en"] [data-l="en"] { display: revert; }
/* inline variants keep flow */
.lang-inline[data-l] { display: none; }
html[data-lang="fr"] .lang-inline[data-l="fr"] { display: inline; }
html[data-lang="en"] .lang-inline[data-l="en"] { display: inline; }

/* ---- Buttons --------------------------------------------------------------*/
/* squared, wide-tracked buttons — a more premium CTA than pills */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.7em;
  padding: 1.05em 2.15em;
  border-radius: 1px;
  border: 1px solid currentColor;
  font-size: 0.74rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.2em;
  background: transparent; color: var(--ink);
  transition: background .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease);
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
/* nudge text right to visually offset the trailing letter-spacing */
.btn > * { transform: translateX(0.1em); }
.btn--accent { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }
.btn--on-accent { color: var(--ink); border-color: rgba(242,235,223,.75); }
.btn--solid { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn--lg { padding: 1.2em 2.7em; font-size: 0.76rem; }
/* keyboard focus ring only — taps/clicks never leave a stuck highlight */
.btn:focus { outline: none; }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* hover effects only on real pointer devices, so a tap doesn't stick */
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
  .btn--accent:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: var(--on-accent); }
  .btn--on-accent:hover { background: #fff; color: var(--ink); border-color:#fff; }
  .btn--solid:hover { background: transparent; color: var(--ink); }
}

/* ============================================================================
   NAV
   ========================================================================== */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between;
  padding-inline: var(--gut);
  color: var(--gold-bright);
  /* transparent bar — sits directly over the page/hero */
  background: transparent;
  transition: color .4s var(--ease);
}
/* nav stays fully transparent everywhere — the controls carry their own
   shadow so they read on both the dark hero and white content below */
.nav.is-stuck { background: transparent; box-shadow: none; }
.nav__logo { display: flex; align-items: center; gap: .6rem; height: 100%; z-index: 2; -webkit-tap-highlight-color: transparent; }
/* emblem masked to the same pale gold as the main page */
.nav__logo-mark {
  display: block; width: 54px; height: 54px;
  background-color: var(--gold-bright);
  -webkit-mask: url("../images/logo.png") center / contain no-repeat;
          mask: url("../images/logo.png") center / contain no-repeat;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.45));
}
.nav__logo-word {
  font-family: "Montserrat", "Inter", system-ui, sans-serif;
  font-weight: 700; color: var(--gold);
  text-transform: uppercase; letter-spacing: 0.22em;
  font-size: 2.3rem; line-height: 1;
}
.nav__logo-text { font-weight: 600; text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.9rem; }

/* ---- left slide-in drawer (all breakpoints) --------------------------- */
.nav__links {
  position: fixed; top: 0; left: 0; bottom: 0;
  width: min(264px, 82vw);
  z-index: 100;                       /* burger (102) stays clickable above it */
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  gap: clamp(22px, 4vh, 40px);
  padding: calc(var(--nav-h) + 20px) clamp(28px, 5vw, 48px) 40px;
  color: var(--gold-bright);
  /* slate with fine gold diagonal lines, a warm light at the top, a gold edge */
  background:
    radial-gradient(120% 45% at 0% 0%, rgba(201,164,92,.10), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9'%3E%3Cpath d='M-1 10L10 -1' stroke='%23C9A45C' stroke-opacity='.11' stroke-width='1'/%3E%3C/svg%3E"),
    linear-gradient(180deg, #17181C 0%, #131417 55%, #0E0F11 100%);
  border-right: 1px solid rgba(201,164,92,.45);
  box-shadow: 26px 0 70px rgba(0,0,0,.5);
  transform: translateX(-100%); visibility: hidden;
  transition: transform .45s var(--ease), visibility .45s var(--ease);
}
.nav__links.is-open { transform: translateX(0); visibility: visible; }
.nav__links { overflow: hidden; }              /* drawer itself never scrolls */
/* lock the page behind the open drawer */
html.nav-open, html.nav-open body { overflow: hidden; overscroll-behavior: none; }

.nav__link {
  position: relative;
  font-family: "Montserrat", "Inter", sans-serif;      /* match the main page */
  font-size: 1.02rem; text-transform: uppercase; letter-spacing: 0.14em; font-weight: 500;
  line-height: 1.1; color: var(--gold-bright);
  display: flex; flex-direction: column; align-items: flex-start;
  -webkit-tap-highlight-color: transparent;
}
.nav__link .sub { font-size: 0.62rem; letter-spacing: 0.1em; color: var(--gold-bright); opacity: .65; }
.nav__link::after {
  content: ""; position: absolute; left: 0; bottom: -6px; height: 1.5px; width: 0;
  background: var(--gold-bright); transition: width .35s var(--ease);
}
.nav__link:hover::after { width: 100%; }

/* ---- location switcher (top of the drawer) ---------------------------- */
.nav__head {
  width: 100%; display: flex; flex-direction: column; gap: 12px;
  padding-bottom: 20px;
}
.nav__loc {
  display: flex; flex-direction: column; gap: 4px;
  width: 100%; -webkit-tap-highlight-color: transparent;
}
.nav__loc-eyebrow {
  font-family: "Montserrat", "Inter", sans-serif;
  font-size: 0.58rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(236,212,142,.6);
}
.nav__loc-name {
  font-family: "Montserrat", "Inter", sans-serif;
  font-size: 1.5rem; font-weight: 700; letter-spacing: 0.04em; color: var(--ink); line-height: 1.05;
}
.nav__loc-alt {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 2px;
  font-family: "Montserrat", "Inter", sans-serif;
  font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--gold-bright); opacity: .9;
}
.nav__loc:hover .nav__loc-alt { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }

/* ---- drawer zones: logo (top) · links (middle) · socials (bottom) ----- */
.nav__home { display: inline-flex; flex-direction: column; align-items: center; gap: 8px; -webkit-tap-highlight-color: transparent; }
.nav__home-word {
  font-family: "Montserrat", "Inter", sans-serif; font-weight: 600;
  color: var(--gold-bright); text-transform: uppercase;
  letter-spacing: 0.28em; font-size: 1.3rem; line-height: 1;
}
.nav__home .nav__logo-mark {
  display: block; width: 66px; height: 66px;
  background-color: var(--gold-bright);
  -webkit-mask: url("../images/logo.png") center / contain no-repeat;
          mask: url("../images/logo.png") center / contain no-repeat;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.45));
  transition: transform .3s var(--ease);
}
.nav__home:hover .nav__logo-mark { transform: scale(1.05); }
.nav__group { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; width: 100%; }
/* drawer info: open status · address · phone */
.nav__info { display: flex; flex-direction: column; gap: 9px; width: 100%; }
.nav__info-status {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: "Montserrat", "Inter", sans-serif; font-size: 0.74rem; font-weight: 600;
  letter-spacing: 0.02em; color: #7bd88f;
}
.nav__info-status::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: currentColor; box-shadow: 0 0 0 3px rgba(123,216,143,.18);
}
.nav__info-status.is-closed { color: #ff8f8f; }
.nav__info-status.is-closed::before { box-shadow: 0 0 0 3px rgba(255,143,143,.18); }
.nav__info-row {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 0.84rem; letter-spacing: 0.01em; color: rgba(236,212,142,.92);
  -webkit-tap-highlight-color: transparent; transition: color .2s var(--ease);
}
.nav__info-row svg { width: 16px; height: 16px; flex: none; color: var(--gold-bright); opacity: .85; }
.nav__info-row:hover { color: var(--ink); }
.nav__info-row:hover svg { opacity: 1; }

/* premium social block (icon-only, no pills) */
.nav__social { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.nav__social-label {
  font-family: "Montserrat", "Inter", sans-serif;
  font-size: 0.58rem; letter-spacing: 0.26em; text-transform: uppercase;
  color: rgba(236,212,142,.55);
}
.nav__social-icons { display: flex; align-items: center; gap: 20px; }
.nav__soc {
  display: inline-flex; color: var(--gold-bright); opacity: .82;
  -webkit-tap-highlight-color: transparent;
  transition: transform .25s var(--ease), opacity .25s var(--ease);
}
.nav__soc svg { width: 23px; height: 23px; }
.nav__soc:hover { opacity: 1; transform: translateY(-2px) scale(1.1); }

/* left-drawer backdrop scrim (created in JS) */
.nav__scrim {
  position: fixed; inset: 0; z-index: 99;
  background: rgba(0,0,0,.5);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .45s var(--ease), visibility .45s var(--ease);
}
.nav__scrim.is-open { opacity: 1; visibility: visible; pointer-events: auto; }

.nav__right { display: flex; align-items: center; gap: 14px; }
.lang-toggle {
  width: 42px; height: 42px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid currentColor; background: transparent; color: inherit;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase;
  cursor: pointer;
  filter: drop-shadow(0 0 10px rgba(0,0,0,.6)) drop-shadow(0 1px 2px rgba(0,0,0,.85));
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.lang-toggle { -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; }
.lang-toggle:focus { outline: none; }
/* hover fill only on real pointer devices — never sticks after a tap */
@media (hover: hover) and (pointer: fine) {
  .lang-toggle:hover { background: var(--gold-bright); color: #1a1a1a; border-color: var(--gold-bright); }
}

/* nav content stays pale gold on the dark bar in every state */
.nav--over { color: var(--gold-bright); }
.nav--over .nav__link .sub { color: var(--gold-bright); }
.nav--over.is-stuck { color: var(--gold-bright); }
.nav--over.is-stuck .nav__link .sub { color: var(--gold-bright); }

/* burger — always visible, far left, sits above the drawer */
.nav__burger { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 30px; height: 20px; margin-right: auto; background: none; border: 0; z-index: 102; cursor: pointer; color: var(--gold-bright); -webkit-tap-highlight-color: transparent; filter: drop-shadow(0 0 10px rgba(0,0,0,.6)) drop-shadow(0 1px 2px rgba(0,0,0,.85)); }
.nav__burger span { height: 2px; width: 100%; background: currentColor; border-radius: 2px; transition: transform .3s var(--ease), opacity .25s var(--ease); }
.nav__burger.is-active { color: var(--gold-bright); }
.nav__burger.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__burger.is-active span:nth-child(2) { opacity: 0; }
.nav__burger.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================================================================
   HERO
   ========================================================================== */
/* hero is pinned; the content below scrolls up and covers it (reveal parallax) */
.hero { position: sticky; top: 0; height: 100svh; display: flex; align-items: flex-end;
  color: #fff; overflow: hidden; z-index: 0; }
/* everything after the hero rides above it on an opaque layer */
.page-flow { position: relative; z-index: 1; background: var(--paper); }
.hero__img { position: absolute; left: 0; right: 0; top: -12%; height: 124%; z-index: 0; will-change: transform; }
.hero__img picture { display: contents; }   /* mobile <source> + desktop <img> behave as a direct child */
.hero__img img { width: 100%; height: 100%; object-fit: cover; }
.hero__img::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,.55) 100%);
}
.hero__inner { position: relative; z-index: 1; width: 100%; padding-bottom: clamp(48px, 8vw, 96px); }
.hero__eyebrow { color: rgba(255,255,255,.85); margin-bottom: 1rem; }
.hero__title { color: #fff; margin-bottom: 1.6rem; }
.hero__tagline {
  /* matches the intro wordmark: Montserrat Light + wide tracking */
  color: #fff; font-family: "Montserrat", "Inter", sans-serif; font-weight: 300;
  font-size: clamp(1.8rem, 4.5vw, 3.4rem); line-height: 1.12;
  letter-spacing: 0.18em; padding-left: 0.18em;   /* offsets the tracking on EVERY line, so wrapped lines share a left edge */
  margin: 0 0 clamp(20px, 3vw, 32px); max-width: 22ch;
  text-shadow: 0 2px 24px rgba(0,0,0,.45), 0 1px 3px rgba(0,0,0,.35);
}
.hero__ctas { display: flex; flex-wrap: nowrap; gap: 14px; }
.hero__scroll {
  position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%);
  z-index: 1; font-size: 0.65rem; letter-spacing: 0.25em; text-transform: uppercase;
  color: rgba(255,255,255,.8); display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.hero__scroll::after { content: ""; width: 1px; height: 34px; background: rgba(255,255,255,.6); animation: scroll-pulse 1.8s var(--ease) infinite; }
@keyframes scroll-pulse { 0%,100% { transform: scaleY(.4); opacity:.4;} 50%{transform:scaleY(1); opacity:1;} }

/* ============================================================================
   ABOUT
   ========================================================================== */
.about { background: var(--paper); }
/* schedule hugs its content — trim whitespace, especially below the button */
.about .about__info { padding-block: clamp(22px, 2.6vw, 36px) clamp(32px, 5vw, 64px); }
.about .about__info .display { font-size: clamp(1.8rem, 4vw, 2.6rem); margin-bottom: 0.6rem; }
.about .info-card { margin-top: 1rem; padding-top: 1rem; }
.about .hours-cta { margin-top: 1.4rem; }
.about__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(32px, 6vw, 90px); align-items: start; }
.about__copy .display { font-size: clamp(2rem, 5vw, 3.6rem); margin: 1rem 0 1.4rem; }
.about__text { max-width: 46ch; color: var(--ink-soft); font-size: 1.08rem; }
.about__media img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }

.info-card { border-top: 1.5px solid var(--ink); padding-top: 1.4rem; margin-top: 2.6rem; }
.info-card h3 { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.16em; margin-bottom: 1rem; }

/* live open/closed state above the week, so the schedule says whether they are
   open right now and not just what the hours are. Text comes from openStatus(),
   which understands services that run past midnight. */
.hours__status {
  display: inline-flex; align-items: center; gap: 9px;
  margin-bottom: 1.1rem; font-weight: 600; font-size: 0.95rem; color: var(--ink);
}
.hours__status::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%; flex: none;
  background: #1f7a4d; box-shadow: 0 0 0 3px rgba(31,122,77,.18);
}
.hours__status.is-closed { color: var(--ink-soft); }
.hours__status.is-closed::before { background: #b3261e; box-shadow: 0 0 0 3px rgba(179,38,30,.16); }
.hours__status:empty { display: none; }

.hours { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
/* credit shown when the hours come from Google (main.js, loadLiveHours) */
.hours__source { margin: .9rem 0 0; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; opacity: .65; }
.hours td { padding: 0.5em 0; border-bottom: 1px solid var(--line); }
.hours td:first-child { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.8rem; color: var(--ink-soft); }
.hours td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.hours tr.is-today td { color: var(--gold); font-weight: 700; }
.hours .closed { color: var(--ink-soft); font-style: italic; }
/* The schedule always sits on the photo background — the two breakpoints below
   cover every width between them — so the closed days and the live status read
   white like the rest of the table rather than staying dark grey on a dark photo.
   Today's row keeps the gold highlight even when it is a closed day. */
.about .hours .closed { color: var(--ink-soft); }
.about .hours tr.is-today .closed { color: var(--gold); }
.about .hours__status { color: var(--ink); }
.about .hours__status.is-closed { color: var(--ink-soft); }

.meta-line { display: flex; flex-direction: column; gap: 4px; margin-top: 1.4rem; }
.meta-line a { border-bottom: 1px solid var(--line); width: max-content; padding-bottom: 2px; }
.meta-line a:hover { border-color: var(--accent); color: var(--accent); }

.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 1.6rem; }
.tag {
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.12em;
  border: 1px solid var(--line); border-radius: 100px; padding: 0.5em 1em; color: var(--ink-soft);
}
.tag--on { border-color: var(--gold); color: var(--gold); }

/* ============================================================================
   MENU (tabbed PDF)
   ========================================================================== */
/* The menu and reservation sit on the raised dark panel, a step lighter than
   the page, so each reads as its own room without a colour change. */
.menu, #reservation {
  background-color: var(--paper-2);
}
.menu { color: var(--ink); }
.menu .eyebrow { color: var(--gold); }
.menu__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 2.4rem; }
.menu__head .display { color: var(--ink); font-size: clamp(2rem, 5vw, 3.6rem); }
.menu__tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 1.8rem; }
.menu__tab {
  background: transparent; color: var(--ink); border: 1px solid rgba(242,235,223,.5);
  border-radius: 1px; padding: 0.75em 1.5em;
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.18em; font-weight: 600;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.menu__tab[aria-selected="true"] { background: var(--gold); color: var(--paper); border-color: var(--gold); }
/* photo-menu tab is a link to its own page */
.menu__tab--link { display: inline-flex; align-items: center; gap: .5em; text-decoration: none; }
.menu__tab-ext { font-size: 1em; opacity: .85; }
@media (hover: hover) and (pointer: fine) {
  .menu__tab--link:hover { background: var(--gold); color: var(--paper); border-color: var(--gold); }
}
.menu__panel { background: var(--paper); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; min-height: 60vh; }
.menu__view { background: transparent; }
.menu__panel iframe, .menu__panel embed { width: 100%; height: 78vh; border: 0; display: block; }
.menu__placeholder {
  min-height: 60vh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; text-align: center; color: var(--ink-soft); padding: 40px;
}
.menu__placeholder .ph-mark { font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent);
  border: 1px solid var(--accent); border-radius: 100px; padding: 0.4em 1em; }

/* ---- Readable text menu ---------------------------------------------------
   Shown when a menu has a web version from the portal (or a hand-typed
   shared.menuText tab). Every text menu sits in one scrolling window; the
   tabs jump to a category and the PDFs open in their own tab. Colours come
   from the brand tokens, so a clone needs nothing here. */
.menu__tab--pdf { display: inline-flex; align-items: center; text-decoration: none; border-color: var(--line); color: var(--ink-soft); }
.menu__tab--pdf::before { content: "\2197\00a0"; }
@media (hover: hover) and (pointer: fine) {
  .menu__tab--pdf:hover { background: var(--gold); color: var(--paper); border-color: var(--gold); }
}
.menu__panel { position: relative; min-width: 0; }
.menu__panel--text { min-height: 0; padding: clamp(20px, 3vw, 36px); }
.menu__view--text {
  position: relative; max-height: 70vh; max-height: min(64svh, 620px);
  overflow-y: auto; overscroll-behavior-y: auto; -webkit-overflow-scrolling: touch;
  padding-right: 8px; scrollbar-width: thin; scrollbar-color: var(--gold-deep) transparent;
}
/* a fade at the foot says "more below" */
.menu__panel--text::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 44px; pointer-events: none;
  background: linear-gradient(rgba(15,13,12,0), var(--paper));
}
.tm__cat + .tm__cat { margin-top: 1.2rem; padding-top: 1.6rem; border-top: 1.5px solid var(--line); }
.tm__group { margin-bottom: 1.6rem; scroll-margin-top: 8px; }
.tm__head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; padding-bottom: .5rem; margin-bottom: .9rem; border-bottom: 1px solid var(--line); }
.tm__title { font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; letter-spacing: 0; color: var(--gold); }
.tm__note { font-size: .72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); }
.tm__cols { margin-left: auto; display: inline-flex; gap: 14px; font-size: .68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
.tm__list { list-style: none; display: grid; gap: 1rem; }
.tm__row { display: flex; align-items: baseline; gap: 8px; }
.tm__name { font-weight: 600; font-size: 1rem; color: var(--ink); }
.tm__dots { flex: 1; min-width: 12px; border-bottom: 1px dotted var(--line); transform: translateY(-4px); }
.tm__price { font-weight: 600; color: var(--gold); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tm__price--two { display: inline-flex; gap: 14px; }
.tm__desc { margin-top: .2rem; font-size: .92rem; line-height: 1.5; color: var(--ink-soft); max-width: 56ch; }
.tm__opts { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: .4rem; font-size: .88rem; color: var(--ink-soft); }
.tm__opt b { color: var(--gold); margin-left: .3em; font-weight: 600; }
.tm__foot { margin-top: .5rem; padding: 12px 14px; border-left: 3px solid var(--accent); background: var(--paper-2); font-size: .9rem; color: var(--ink-soft); }
/* Phones scroll the menu in its own window too, a little taller there so more
   of it shows at once; the page takes over the swipe at either end. */
@media (max-width: 720px) {
  .menu__view--text { max-height: min(70svh, 640px); overscroll-behavior-y: auto; touch-action: pan-y; }
}

/* ============================================================================
   ORDER
   ========================================================================== */
.order { background: var(--paper); text-align: center; }
.order .display { font-size: clamp(2rem, 5vw, 3.6rem); margin: 0.8rem 0 2rem; }
.order__btns { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }

/* ============================================================================
   GIFT CARDS  +  RESERVATION  (embed sections)
   ========================================================================== */
.embed-sec { background: var(--paper-2); }
.embed-sec.alt { background: var(--paper); }
.embed-sec__head { text-align: center; margin-bottom: 1.4rem; }
.embed-sec__head .display { font-size: clamp(2rem, 5vw, 3.4rem); margin-top: 0.6rem; }
/* Libro draws dark text on a transparent page, so its frame keeps a light card. */
.embed-frame { background: #F4EDE3; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.embed-frame iframe { width: 100%; min-height: 640px; border: 0; display: block; }
.embed-placeholder {
  min-height: 320px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; text-align: center; color: var(--ink-soft); padding: 48px;
}
.embed-placeholder .ph-mark { font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent);
  border: 1px solid var(--accent); border-radius: 100px; padding: 0.4em 1em; }

/* gift-card CTA (opens storefront in a new tab) */
.cta-wrap { text-align: center; }
.cta-block { display: flex; flex-direction: column; align-items: center; gap: 1.8rem; padding: clamp(24px, 5vw, 56px) 0; }
.cta-block p { max-width: 44ch; color: var(--ink-soft); font-size: 1.1rem; }

/* ============================================================================
   REVIEWS
   ========================================================================== */
.reviews { background: var(--bar); color: var(--ink); text-align: center; }
.reviews .eyebrow { color: var(--gold); margin-bottom: clamp(16px, 2.4vw, 26px); }
/* the Google rating as a badge */
.reviews__badge {
  display: inline-grid; grid-template-columns: auto auto; align-items: center; gap: 4px 14px;
  padding: 12px 22px; border: 1px solid rgba(201,164,92,.45); border-radius: 12px;
  background: rgba(19,20,23,.7); text-align: left;
}
.reviews__rating { grid-row: span 2; font: 800 2.5rem/1 var(--font-display); color: var(--ink); }
.reviews__stars { color: var(--gold); letter-spacing: 3px; font-size: .95rem; }
.reviews__count { font-size: .8rem; letter-spacing: .04em; color: var(--ink-soft); }
/* two bands of review pills drifting opposite ways, faded at both ends */
.reviews__bands {
  display: grid; gap: 12px; margin-top: clamp(20px, 3vw, 30px); overflow: hidden;
  -webkit-mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.reviews__band { display: flex; width: max-content; animation: reviews-drift 60s linear infinite; animation-play-state: paused; will-change: transform; }
.reviews__band--back { animation-direction: reverse; animation-duration: 66s; }
.reviews.is-on .reviews__band { animation-play-state: running; }
@media (hover: hover) and (pointer: fine) { .reviews__bands:hover .reviews__band { animation-play-state: paused; } }
.reviews__track { display: flex; gap: 12px; padding-right: 12px; list-style: none; margin: 0; }
.rpill {
  flex: none; display: flex; align-items: center; gap: 12px; white-space: nowrap;
  padding: 12px 20px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--paper-2); color: var(--ink); font-size: .95rem;
}
.rpill__stars { color: var(--gold); font-size: .78rem; letter-spacing: 1px; }
@keyframes reviews-drift { to { transform: translateX(-25%); } }   /* one of the four copies */
/* reduced motion: the pills sit still, wrapped and centred, shown once */
@media (prefers-reduced-motion: reduce) {
  .reviews__bands { -webkit-mask: none; mask: none; }
  .reviews__band { width: auto; justify-content: center; animation: none; }
  .reviews__track { flex-wrap: wrap; justify-content: center; padding-right: 0; }
  .reviews__track[aria-hidden="true"] { display: none; }
}
.reviews__btns { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 18px; }
.reviews .btn { color: var(--ink); }
.reviews .btn--accent { color: var(--on-accent); }
@media (hover: hover) and (pointer: fine) {
  .reviews .btn:not(.btn--accent):hover { background: var(--ink); color: var(--paper); }
}
@media (max-width: 560px) { .reviews__btns .btn { flex: 1 1 100%; max-width: 320px; } }

/* ============================================================================
   CONTACT
   ========================================================================== */
.contact { background: var(--paper); }
.contact__grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(32px, 6vw, 80px); align-items: start; }
.contact__intro .display { font-size: clamp(2rem, 5vw, 3.4rem); margin: 0 0 .6rem; }
.contact__note { margin-top: .6rem; font-size: 0.86rem; color: var(--ink-soft); }
.form { display: grid; gap: 10px; }
.form input, .form textarea {
  width: 100%; font: inherit; color: var(--ink);
  background: transparent; border: 0; border-bottom: 1.5px solid var(--line);
  padding: 0.9em 0.2em; transition: border-color .3s;
}
.form input:focus, .form textarea:focus { outline: none; border-color: var(--accent); }
.form textarea { resize: none; min-height: 110px; }
.form ::placeholder { color: var(--ink-soft); opacity: .7; }
.form button { justify-self: center; }
.form__status { font-size: 0.85rem; color: var(--accent); min-height: 1.2em; }

/* gallery — auto-scrolling image strip (after the contact section).
   Native horizontal scroll (JS auto-advances scrollLeft); swipeable. */
.gallery { background: var(--paper); padding-top: clamp(36px, 4.5vw, 60px); padding-bottom: clamp(28px, 3.5vw, 44px); }
.gallery__title { text-align: center; margin-bottom: clamp(1rem, 2vw, 1.6rem); }
/* a mosaic of seven photos: one large, one tall, one wide; a tap opens the
   viewer with all of them (main.js renderGallery / openViewer) */
.gallery__mosaic {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: clamp(130px, 14vw, 200px); gap: clamp(8px, 1vw, 12px);
}
.gm__tile {
  position: relative; display: block; padding: 0; border: 0; border-radius: 12px; overflow: hidden;
  background: var(--paper-2); cursor: zoom-in; -webkit-tap-highlight-color: transparent;
}
.gm__tile:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.gm__tile:nth-child(2) { grid-row: span 2; }
.gm__tile:nth-child(5) { grid-column: span 2; }
.gm__tile picture { display: contents; }
.gm__tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.gm__tile::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(242,235,223,.08); transition: box-shadow .3s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .gm__tile:hover img { transform: scale(1.05); }
  .gm__tile:hover::after { box-shadow: inset 0 0 0 1.5px var(--gold); }
}
.gm__tile:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.gallery__more { display: flex; justify-content: center; margin-top: clamp(16px, 2.4vw, 24px); }
@media (max-width: 720px) {
  .gallery__mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: clamp(96px, 26vw, 140px); gap: 8px; }
}

/* the photo viewer */
html.lb-open, html.lb-open body { overflow: hidden; }
.lb {
  position: fixed; inset: 0; z-index: 200;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: max(64px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(56px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  background: rgba(8, 9, 10, .95);
}
.lb__fig { margin: 0; min-width: 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
.lb__img { max-width: 100%; max-height: calc(100% - 3.4em); object-fit: contain; border-radius: 8px; transition: opacity .25s var(--ease); }
.lb__img.is-loading { opacity: 0; }
.lb__cap { color: var(--ink-soft); font-size: .9rem; text-align: center; max-width: 60ch; text-wrap: balance; }
.lb__nav, .lb__x {
  display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  border: 1.5px solid rgba(242,235,223,.35); background: rgba(19,20,23,.6); color: var(--ink);
  font: 400 1.5rem/1 var(--font); cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: border-color .25s var(--ease), color .25s var(--ease);
}
@media (hover: hover) and (pointer: fine) { .lb__nav:hover, .lb__x:hover { border-color: var(--gold); color: var(--gold); } }
.lb__nav:focus-visible, .lb__x:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.lb__x { position: absolute; top: max(12px, env(safe-area-inset-top, 0px)); right: max(12px, env(safe-area-inset-right, 0px)); font-size: 1.3rem; }
.lb__count {
  position: absolute; left: 0; right: 0; bottom: max(20px, env(safe-area-inset-bottom, 0px));
  text-align: center; font-size: .72rem; letter-spacing: .2em; color: var(--ink-soft); font-variant-numeric: tabular-nums;
  pointer-events: none;   /* on phones it sits between the arrows: taps go through to them */
}
@media (max-width: 720px) {
  .lb { grid-template-columns: minmax(0, 1fr); padding-bottom: max(84px, env(safe-area-inset-bottom, 0px)); }
  .lb__nav { position: absolute; bottom: max(12px, env(safe-area-inset-bottom, 0px)); }
  .lb__nav--prev { left: max(16px, env(safe-area-inset-left, 0px)); }
  .lb__nav--next { right: max(16px, env(safe-area-inset-right, 0px)); }
  .lb__count { bottom: max(28px, env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) { .gm__tile img, .lb__img { transition: none; } }

/* ============================================================================
   FOOTER
   ========================================================================== */
.footer { background: var(--bar); color: var(--ink); padding-top: clamp(32px, 4vw, 48px); }
.footer a:hover { opacity: .7; }
.footer__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; padding-block: clamp(56px, 8vw, 96px); }
.footer__brand .display { font-size: clamp(2.4rem, 6vw, 4.2rem); color:#fff; }
.footer__brand img { filter: brightness(0) invert(1); }  /* white logo on the dark footer */
.footer__brand p { color: rgba(255,255,255,.8); max-width: 32ch; margin-top: 1rem; }
.footer h4 { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.18em; margin-bottom: 1.2rem; color: rgba(255,255,255,.7); }
.footer ul { list-style: none; display: flex; flex-direction: column; gap: 0.7rem; font-size: 0.98rem; }
.footer__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.4rem; }
.footer__bottom {
  border-top: 1px solid var(--line);
  padding-block: 20px; display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: center; text-align: center;
  font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-soft);
}
.footer__bottom .lang-toggle { border-color: rgba(255,255,255,.55); }
@media (hover: hover) and (pointer: fine) {
  .footer__bottom .lang-toggle:hover { background: var(--gold); color: var(--paper); border-color: var(--gold); }
}
.footer__bottom a { border-bottom: 1px solid var(--line); }
.footer__legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; }
/* agency credit: present but quiet — smaller, lighter weight, no underline */
.footer__bottom a.footer__credit { border-bottom: 0; font-size: 0.66rem; font-weight: 400; }
@media (hover: hover) and (pointer: fine) { .footer__bottom a.footer__credit:hover { text-decoration: underline; } }

/* ============================================================================
   LEGAL PAGES (/privacy, /terms) — bilingual, prose
   ========================================================================== */
.legal-body { background: var(--paper); color: var(--ink); }
.legal-nav {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px var(--gut); background: var(--bar); color: var(--ink); border-bottom: 2px solid var(--accent);
}
.legal-nav a { color: #fff; }
.legal-nav .legal-back { font-size: 0.9rem; letter-spacing: 0.02em; }
.legal-nav .legal-brand {
  font-family: "Montserrat", "Inter", sans-serif; font-weight: 300;
  letter-spacing: 0.28em; text-indent: 0.28em; color: var(--gold-bright); font-size: 1.1rem;
}
.legal-nav .lang-toggle { border-color: rgba(255,255,255,.6); color: #fff; }
@media (hover: hover) and (pointer: fine) {
  .legal-nav .lang-toggle:hover { background: var(--gold); color: var(--paper); border-color: var(--gold); }
}
.legal { max-width: 820px; margin: 0 auto; padding: clamp(32px, 6vw, 72px) var(--gut); }
.legal h1 { font-size: clamp(1.9rem, 5vw, 3rem); letter-spacing: -0.02em; margin-bottom: 0.4rem; }
.legal .legal-updated { color: var(--muted); font-size: 0.9rem; margin-bottom: 2rem; }
.legal h2 { font-size: 1.15rem; margin: 2rem 0 0.6rem; color: var(--ink); letter-spacing: -0.01em; }
.legal p, .legal li { color: var(--ink-soft); line-height: 1.7; }
.legal p { margin-bottom: 0.9rem; }
.legal ul { margin: 0.4rem 0 1rem 1.2rem; display: flex; flex-direction: column; gap: 0.4rem; }
.legal a { color: var(--gold); border-bottom: 1px solid var(--line); }
.legal .legal-note { margin-top: 2.4rem; padding-top: 1.2rem; border-top: 1px solid var(--line); font-size: 0.85rem; color: var(--muted); }

/* visually hidden, still announced — the emblem carries the wordmark */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---- reveal-on-scroll ----------------------------------------------------*/
/* hidden only while main.js watches it (initReveal sets html.reveal-on), so a
   script that fails or a block drawn later can never leave content invisible */
.reveal-on .reveal { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal-on .reveal.in { opacity: 1; transform: none; }

/* ============================================================================
   LOCATION PAGE — schedule, full-bleed images, menu, reviews, minimal footer
   ========================================================================== */
/* full-bleed image band (fills the page width, no borders) */
.full-img { display: block; width: 100%; height: clamp(320px, 46vw, 620px); object-fit: cover; }

/* full-bleed parallax image band */
.imgband { position: relative; width: 100%; height: clamp(280px, 44vw, 540px); overflow: hidden; }
.imgband img {
  position: absolute; left: 0; top: -14%; width: 100%; height: 128%;
  object-fit: cover; will-change: transform;
}

/* schedule / address */
.about__info { max-width: 640px; }
.about__info .display { margin-bottom: 1.2rem; }
.about__addr {
  display: inline-block; margin-bottom: 1.2rem; font-size: 1.1rem; color: var(--ink);
  border-bottom: 1.5px solid var(--line); padding-bottom: 3px; transition: color .25s, border-color .25s;
}
.about__addr:hover { color: var(--accent); border-color: var(--accent); }
.about__addr .addr-arrow { color: var(--accent); }

/* order message */
.order__msg { max-width: 46ch; margin: 0 auto 2rem; color: var(--ink-soft); font-size: 1.1rem; }

/* gift CTA — accent + attention pulse */
.gift-cta { animation: giftPulse 2.6s var(--ease) infinite; }
@keyframes giftPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(247,106,104,.5); transform: translateY(0); }
  55% { box-shadow: 0 0 0 16px rgba(247,106,104,0); transform: translateY(-2px); }
}

/* reservation — a little bigger */
/* OpenTable's widget is ~350px and sizes itself; the embed this rule was
   written for was a fixed 800px, and keeping that left a tall white void.
   It also ships with width="840" — the base .embed-frame rule stretched it to
   the full panel, and OpenTable lays its own content out for 840, so the form
   ended up hugging the left edge of a too-wide frame. Cap it and centre it. */
#reservation .embed-frame { min-height: 0; }
/* Holds the widget's place until main.js mounts it as the section nears. */
#reservation .embed-frame:empty { min-height: 640px; }
#reservation .embed-frame { max-width: 860px; margin-inline: auto; }
#reservation .embed-frame iframe { min-height: 640px; }
/* plain link under the reservation widget — the booking route that still works
   when a privacy blocker stops opentable.com from loading at all */
.embed-fallback {
  display: block; margin-top: 1.1rem; text-align: center;
  color: var(--ink); font-weight: 600;
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.18em;
  border-bottom: 1px solid rgba(242,235,223,.45); padding-bottom: 2px;
  width: fit-content; margin-inline: auto;
  transition: border-color .3s var(--ease), opacity .3s var(--ease);
}
.embed-fallback:hover { border-color: var(--gold); color: var(--gold); }
/* reservation section — raised dark panel, trimmed top padding.
   Background comes from the shared .menu, #reservation rule above; normal
   section-pad bottom so the panel hugs the content like the menu. */
#reservation {
  padding-top: clamp(24px, 3.5vw, 48px);
}
#reservation .display { color: var(--ink); }
#reservation .eyebrow { color: var(--gold); }
#reservation .embed-sec__head { text-align: center; }
/* reveal parallax: a section pins and the next (opaque) section scrolls up and
   covers it — same mechanic as the hero reveal, with a soft top shadow for
   depth. Applied to Reservation-over-About and Contact-over-Reviews so both
   read the same. */
#about, #reviews { position: sticky; top: 0; z-index: 0; }
#reservation, #contact { position: relative; z-index: 1; box-shadow: 0 -22px 48px rgba(0,0,0,.16); }
/* the gallery + footer follow the pinned sticky sections, so they must be
   positioned to paint ABOVE them — otherwise the pinned #about/#reviews cover
   them (same reason as the #order section). */
.gallery, .footer { position: relative; z-index: 1; }

/* inline PDF menu (rendered with pdf.js) */
.menu__panel { min-height: auto; }
/* photo menu flows with the page (no nested scroll box) so the PDF top scrolls
   naturally with the page instead of shifting inside an inner scroller.
   No top padding so the first photo sits flush with the panel top. */
.menu__pages { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 0 12px 12px; overflow-x: hidden; background: #fff; }
/* .menu__page is a wrapper around one page's canvas band(s); bands stack flush */
.menu__page { width: 100%; max-width: 900px; box-shadow: 0 2px 12px rgba(0,0,0,.14); border-radius: 2px; overflow: hidden; display: block; font-size: 0; }
.menu__page canvas { display: block; width: 100%; height: auto; }
.menu__loading { text-align: center; padding: 56px 20px; color: var(--ink-soft); }
/* cute bouncing-dots loader shown while a PDF renders */
.menu__loading-txt { display: block; margin-top: 16px; font-size: .9rem; letter-spacing: .04em; }
.menu__spinner { display: inline-flex; gap: 9px; }
.menu__spinner > span {
  width: 12px; height: 12px; border-radius: 50%; background: var(--accent);
  animation: menu-bounce 1.1s ease-in-out infinite both;
}
.menu__spinner > span:nth-child(2) { animation-delay: .16s; background: var(--gold); }
.menu__spinner > span:nth-child(3) { animation-delay: .32s; }
@keyframes menu-bounce {
  0%, 70%, 100% { transform: translateY(0) scale(.85); opacity: .55; }
  35%           { transform: translateY(-14px) scale(1); opacity: 1; }
}
.menu__open { display: block; text-align: center; padding: 12px; color: var(--accent); font-weight: 600; }

/* à la carte — page-by-page pager (arrows + swipe) */
.menu__view--paged { position: relative; background: #fff; }
.menu__pager {
  display: flex;                 /* height follows the page — viewer == PDF height */
  max-width: 900px; margin-inline: auto;   /* hit/scroll frame matches the PDF width */
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; background: #fff; cursor: grab;
  overscroll-behavior-x: contain;
}
.menu__pager::-webkit-scrollbar { display: none; }
.menu__pager.is-dragging { scroll-snap-type: none; scroll-behavior: auto; cursor: grabbing; }
.menu__slide {
  flex: 0 0 100%; scroll-snap-align: center;
  display: flex; align-items: flex-start; justify-content: center;
}
.menu__slide .menu__page { max-width: 100%; }
.menu__slide .menu__page canvas { -webkit-user-select: none; user-select: none; pointer-events: none; }
/* bottom control row: ‹  1 / N  › — arrows styled like the nav controls */
.menu__controls { display: flex; align-items: center; justify-content: center; gap: clamp(24px, 5vw, 46px); padding: 14px; background: #fff; }
.menu__nav {
  background: transparent; border: 0; padding: 0; cursor: pointer;
  color: var(--gold-bright); font-size: 2rem; line-height: 1;
  filter: drop-shadow(0 0 10px rgba(0,0,0,.6)) drop-shadow(0 1px 2px rgba(0,0,0,.85));
  transition: opacity .2s var(--ease), transform .2s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) and (pointer: fine) { .menu__nav:hover { transform: scale(1.15); } }
.menu__nav:disabled { opacity: .25; pointer-events: none; }
.menu__counter {
  text-align: center; color: var(--ink-soft); min-width: 4.5em;
  font-size: 0.78rem; letter-spacing: 0.14em; font-variant-numeric: tabular-nums;
}

/* minimal footer — phone + social pills */
.footer--min { background: var(--bar); color: var(--ink); }
.footer__min { display: flex; flex-direction: column; align-items: center; gap: 22px; padding-block: clamp(40px, 7vw, 72px); text-align: center; }
.footer__phone { font-size: clamp(1.4rem, 4vw, 2rem); font-weight: 600; color: #fff; }
.footer__social { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.footer__pill {
  border: 1.5px solid rgba(255,255,255,.7); border-radius: 100px; padding: .7em 1.6em;
  font-size: .8rem; text-transform: uppercase; letter-spacing: .12em; color: #fff;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.footer__pill:hover { background: var(--gold); color: var(--paper); }

/* hero — Ken Burns motion, clickable address, live open/closed status */
.hero__img img { animation: kenburns 26s ease-in-out infinite alternate; transform-origin: center; will-change: transform; }
/* gentler zoom on mobile — the image was over-magnified (pixelated); keep the slow pan */
@keyframes kenburns-soft { from { transform: scale(1.0); } to { transform: scale(1.035) translate(-0.6%, -0.5%); } }
.hero__addr {
  display: inline-block; width: max-content; max-width: 100%; color: #fff;
  font-size: clamp(.9rem, 2.4vw, 1.05rem); border-bottom: 1px solid rgba(255,255,255,.55);
  padding-bottom: 2px; margin: 0 0 1.4rem;
}
.hero__addr:hover { border-color: var(--accent); }
.hero__addr .addr-arrow { color: var(--accent); }
.hero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin-top: 1.6rem; font-size: .92rem; }
.hero__status { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: #fff; }
.hero__status::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #7bd88f; box-shadow: 0 0 0 3px rgba(123,216,143,.25); }
.hero__status.is-closed { color: rgba(255,255,255,.88); }
.hero__status.is-closed::before { background: #ff6b6b; box-shadow: 0 0 0 3px rgba(255,107,107,.25); }
.hero__seats { color: rgba(255,255,255,.82); }

@media (prefers-reduced-motion: reduce) {
  .gift-cta { animation: none; }
}

/* ============================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 900px) {
  .about__grid, .contact__grid { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
  .select-grid { grid-template-columns: 1fr; }
}


@media (max-width: 720px) {
  .footer__top { grid-template-columns: 1fr; }
  /* the Reserve/Order CTAs live in the sticky bottom bar on mobile */
  .hero__ctas { display: none; }

  /* on phones the contact block joins the menu/reservation colour panels */
  .contact {
    background: var(--paper-2);
  }
  .contact .display { color: var(--ink); }
  .contact [data-contact-intro] { color: var(--ink-soft); }
  /* the form sits on its own dark glass panel so the cream inputs read */
  .contact .form {
    background: rgba(15,13,12,.86); border: 1px solid var(--line); border-radius: 8px;
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    padding: clamp(20px, 5vw, 28px);
    box-shadow: 0 12px 34px rgba(0,0,0,.14);
  }

  /* Opening Hours (#about) on mobile: portrait photo background, content pinned
     to the left in white. Taller than one screen (like desktop) so the pinned
     section dwells instead of flashing past; content is centred within the first
     screen so it stays viewport-centred while pinned. */
  .about {
    background: url("../images/about-bg.jpg") 50% center / cover no-repeat;   /* the samurai mural, as on desktop */
    background-image: image-set(url("../images/about-bg-900.webp") type("image/webp"), url("../images/about-bg.jpg") type("image/jpeg"));   /* 40 KB on a phone, not 158 */
  }
  .about::before {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: rgba(13,14,16,.72);
  }
  .about .about__info {
    position: relative; z-index: 1;
    padding-top: calc(var(--nav-h) + 8px);
  }
  .about .about__info .display { color: var(--ink); }
  .about .about__addr { color: var(--ink); border-bottom-color: rgba(242,235,223,.5); }
  .about .info-card { border-top-color: rgba(242,235,223,.4); }
  .about .hours td { color: var(--ink); border-bottom-color: rgba(242,235,223,.18); }
  .about .hours td:first-child { color: var(--ink-soft); }
  .about .hours td:last-child { color: var(--ink); }
  .about .hours tr.is-today td { color: var(--gold); font-weight: 700; }
  /* "Heures d'ouverture" on one line on a phone */
  .about .about__info .display { font-size: clamp(1.45rem, 7vw, 2.2rem); }

  /* the floating bar steps aside at the footer's legal line (main.js
     initCtaBar), so the footer only clears the phone's home bar */
  .footer { padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
  .photomain { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }

  .hero { align-items: flex-end; }
  /* full-height hero on mobile. kenburns-soft (max 1.035x) keeps the 1920x1080
     source at/under native scale even at 100svh, so no upscaling/pixelation;
     the trimmed overscan pulls the image to its least-zoomed cover position. */
  .hero { height: 100svh; }
  /* true cover (no parallax overscan) = least-zoomed image; hero parallax is
     disabled on phones in main.js so no edge gap is revealed */
  .hero__img { top: 0; height: 100%; }
  .hero__img img { animation-name: kenburns-soft; }
  .menu__panel iframe, .menu__panel embed { height: 70vh; }
}
/* narrow phones: keep the two sticky-bar buttons on one line with longer FR labels */
@media (max-width: 430px) {
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; scroll-behavior: auto; }
  .reveal-on .reveal { opacity: 1; transform: none; }
}

/* ============================================================================
   DESKTOP CONTROLS (min-width:721px — above the mobile breakpoint)
   Placed last so it overrides the base .hero__ctas rules above.
   - nav controls (burger + FR/EN toggle) enlarged 1.6×
   - taller bar so the larger controls sit lower and stay fully on-screen
   - Reserve/Order live in the floating booking bar (.ctabar), not the hero
   Mobile is intentionally left untouched.
   ========================================================================== */
@media (min-width: 721px) {
  .nav { height: 100px; }

  .nav__burger { width: 48px; height: 32px; gap: 8px; }
  .nav__burger span { height: 3.2px; }
  .nav__burger.is-active span:nth-child(1) { transform: translateY(11.2px) rotate(45deg); }
  .nav__burger.is-active span:nth-child(3) { transform: translateY(-11.2px) rotate(-45deg); }

  .lang-toggle { width: 67.2px; height: 67.2px; border-width: 2.4px; font-size: 1.152rem; }

  /* CTAs move out of the hero and into the sticky bottom bar */
  .hero__ctas { display: none; }
  /* the floating bar stays on wider screens: the footer's last line and the
     pinned reviews' buttons end above it */
  .footer { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
  .reviews.section-pad { padding-bottom: 110px; }

  /* Opening Hours (#about): photo background, content pushed to the left.
     A left-heavy dark scrim keeps the hours legible; text recoloured to white. */
  /* Pinned, and taller than the screen: the schedule stays in full view for
     a good part of a screen's scroll before Reserve slides over it. The
     schedule is centred in the first screen, clear of the floating bar. */
  .about {
    background: url("../images/about-bg.jpg") center center / cover no-repeat;
    background-image: image-set(url("../images/about-bg.webp") type("image/webp"), url("../images/about-bg.jpg") type("image/jpeg"));
    min-height: 140svh;
  }
  /* an even shade, darkest behind the schedule */
  .about::before {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background:
      radial-gradient(ellipse 60% 55% at 50% 36%, rgba(13,14,16,.88), rgba(13,14,16,.62));
  }
  .about .about__info {
    position: relative; z-index: 1;
    max-width: 520px;
    min-height: 100svh;
    display: flex; flex-direction: column; justify-content: center;
    padding-block: 96px 120px;   /* the nav above, the floating bar below */
  }
  /* recolour content to read over the dark photo */
  .about .about__info .display { color: var(--ink); }
  .about .about__addr { color: var(--ink); border-bottom-color: rgba(242,235,223,.5); }
  .about .about__addr:hover { color: var(--gold); border-bottom-color: var(--gold); }
  .about .info-card { border-top-color: rgba(242,235,223,.4); }
  .about .hours td { color: var(--ink); border-bottom-color: rgba(242,235,223,.18); }
  .about .hours td:first-child { color: var(--ink-soft); }
  .about .hours td:last-child { color: var(--ink); }
  .about .hours tr.is-today td { color: var(--gold); font-weight: 700; }

  /* Contact (#contact): full-screen photo background (like the hero), content
     pushed to the right. A right-heavy dark scrim keeps the copy legible; the
     form sits on a white panel (same as mobile) so its inputs stay usable. */
  .contact {
    background: url("../images/contact-bg.jpg") center center / cover no-repeat;
  }
  .contact::before {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background:
      radial-gradient(ellipse 60% 75% at 50% 50%, rgba(13,14,16,.88), rgba(13,14,16,.62));
  }
  .contact .contact__grid {
    position: relative; z-index: 1;
    grid-template-columns: 1fr;   /* single column, centred */
    margin-inline: auto;
    max-width: 560px;
    gap: 22px;
  }
  /* recolour intro copy to read over the dark photo */
  .contact .contact__intro .display { color: var(--ink); }
  .contact [data-contact-intro] { color: var(--ink-soft); }
  /* form on its own dark glass panel over the photo */
  .contact .form {
    background: rgba(15,13,12,.86); border: 1px solid var(--line); border-radius: 8px;
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    padding: clamp(22px, 2.4vw, 30px);
    box-shadow: 0 12px 34px rgba(0,0,0,.2);
  }

  /* Menu à-la-carte pager: float the ‹/› arrows to the vertical middle of the
     viewer (one on each side) and make them 3× bigger. The counter stays in the
     bottom control row on its own. */
  .menu__nav {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
    font-size: 6rem;   /* 3× the base 2rem */
  }
  .menu__nav--prev { left: clamp(8px, 3vw, 44px); }
  .menu__nav--next { right: clamp(8px, 3vw, 44px); }
  .menu__nav:hover { transform: translateY(-50%) scale(1.12); }
}

/* ============================================================================
   PHOTO MENU — standalone page (/menu-photo/)
   ========================================================================== */
.photobody { background: var(--paper); }
.photobar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  padding: 12px var(--gut);
  background: var(--accent);
}
/* back button uses the site .btn/.btn--on-accent pill; just tune size + chevron */
.photobar__back { gap: .45em; padding: .8em 1.6em; }
.photobar__chev { font-size: 1.35em; line-height: 1; }
.photomain { max-width: 960px; margin-inline: auto; padding: clamp(22px, 4vw, 44px) 0 64px; }
.photomenu { max-width: 900px; margin-inline: auto; }

/* ============================================================
   POP-UP — client message published from the Catlas portal.
   Always a centred card, on every screen size. It sits above
   .nav__scrim (z-index 99) and scrolls inside itself rather than
   growing past the viewport on a short phone screen.
   ============================================================ */
.popup {
  position: fixed; z-index: 100;
  left: 50%; top: 50%; transform: translate(-50%, -46%);
  width: min(420px, calc(100vw - 32px));
  padding: 30px 28px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  box-shadow: 0 30px 80px rgba(0,0,0,.6);
  border-radius: 2px;
  text-align: center;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .4s var(--ease), transform .4s var(--ease), visibility .4s var(--ease);
}
.popup.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, -50%); }

.popup__title {
  font-family: var(--font-display, "Montserrat", sans-serif);
  font-size: 1.12rem; font-weight: 600; color: var(--ink, #333);
  margin-bottom: 8px;
}
.popup__body { margin: 0; font-size: .94rem; line-height: 1.55; color: var(--ink-soft, #666); }

.popup__x {
  position: absolute; top: 8px; right: 10px;
  width: 32px; height: 32px; padding: 0;
  border: 0; background: transparent; color: #999;
  font-size: .78rem; line-height: 1; cursor: pointer;
}
.popup__x:hover { color: var(--ink, #333); }

@media (prefers-reduced-motion: reduce) {
  .popup { transition: none; }
}

/* ============================================================================
   GIFT CARDS (#giftcards) — as on Saint Sushi, on the slate ground
   ========================================================================== */
/* positioned so it paints above the pinned #reviews it follows */
.gc { background: var(--paper); overflow: hidden; position: relative; z-index: 1; }
@supports (overflow: clip) { .gc { overflow: visible; overflow-x: clip; } }   /* its wave edge overhangs its top */
.gc::before {   /* a low amber glow behind the cards */
  content: ""; position: absolute; right: -10%; top: 10%; width: 60%; height: 80%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(201,164,92,.18), transparent);
}
.gc__grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.gc__copy { text-align: center; }
.gc .eyebrow { color: var(--gold); }
.gc .display { font-size: clamp(2.2rem, 5.4vw, 4.2rem); margin: .5rem 0 .8rem; }
.gc__text { color: var(--ink-soft); font-size: 1.08rem; line-height: 1.6; max-width: 44ch; margin: 0 auto 1.4rem; text-wrap: balance; }
.gc__amounts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 1.4rem; }
.gc__amt {
  font: 600 .86rem/1 var(--font); letter-spacing: .06em; color: var(--ink); padding: .9em 1.35em;
  border: 1px solid rgba(243,234,219,.28); border-radius: 999px; background: rgba(15,13,12,.5);
  transition: color .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease);
}
@media (hover: hover) and (pointer: fine) { .gc__amt:hover { border-color: var(--gold); color: var(--paper); background: var(--gold); } }
.gc__cta { display: inline-flex; }
.gc__soon {   /* while gift cards are not on sale yet (content.js giftCard.soon) */
  display: inline-block; font: 600 .78rem/1 var(--font); letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold); padding: .95em 1.6em; border: 1px solid var(--gold); border-radius: 999px;
}
.gc__note { margin-top: 1rem; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.gc__dot { color: var(--gold); padding-inline: .5em; }
.gc__fan { position: relative; aspect-ratio: 4 / 3.1; max-width: 560px; width: 100%; justify-self: center; }
.gc__fan img {
  position: absolute; width: 74%; aspect-ratio: 849 / 622; object-fit: cover; border-radius: 14px;
  box-shadow: 0 30px 60px -18px rgba(0,0,0,.8), 0 0 0 1px rgba(243,234,219,.08);
}
.gc__fan img:nth-child(1) { left: 0;   top: 26%; transform: rotate(-9deg); }
.gc__fan img:nth-child(2) { left: 13%; top: 12%; transform: rotate(-1.5deg); }
.gc__fan img:nth-child(3) { left: 26%; top: 0;   transform: rotate(7deg); }
@media (max-width: 860px) {
  .gc__grid { grid-template-columns: 1fr; }
  .gc__fan { order: -1; max-width: 420px; }
  .gc__copy { text-align: center; }
  .gc__text { margin-inline: auto; }
  .gc__fact { display: block; }
  .gc__fact + .gc__fact { margin-top: .35em; }
  .gc__dot { display: none; }
  .gc__cta { width: 100%; max-width: 420px; justify-content: center; }
  /* four amounts: 2 + 2 (3 + 1 looks unbalanced) */
  .gc__amounts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; max-width: 320px; margin-inline: auto; }
  .gc__amt { grid-column: span 2; text-align: center; padding-inline: .5em; }
}

/* the primary CTA reads as the logo's red on the dark ground */
.btn--accent { box-shadow: 0 10px 30px -10px rgba(201,164,92,.55); }

/* Hero: seigaiha, the Japanese wave pattern, in fine gold lines on charcoal,
   fading out behind the wordmark and the tagline at the centre. One tile of
   the pattern is 76x38; it draws every scale that reaches into the tile, the
   upper rows first so each row tucks over the one above it. Reserve/Order
   live in the floating bar (.ctabar), so the hero holds only these. */
.hero { align-items: center; justify-content: center; background: #0f1012; }
.hero__waves {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='76' height='38'%3E%3Cdefs%3E%3Cg id='s' fill='%230f1012' stroke='%23C9A45C' stroke-opacity='.55'%3E%3Ccircle r='38'/%3E%3Ccircle r='28.5'/%3E%3Ccircle r='19'/%3E%3Ccircle r='9.5'/%3E%3C/g%3E%3C/defs%3E%3Cuse href='%23s'/%3E%3Cuse href='%23s' x='76'/%3E%3Cuse href='%23s' x='38' y='19'/%3E%3Cuse href='%23s' y='38'/%3E%3Cuse href='%23s' x='76' y='38'/%3E%3Cuse href='%23s' x='38' y='57'/%3E%3Cuse href='%23s' y='76'/%3E%3Cuse href='%23s' x='76' y='76'/%3E%3C/svg%3E") 50% 50% / 76px 38px repeat;
  -webkit-mask-image: radial-gradient(42% 46% at 50% 50%, transparent 45%, #000 100%);
          mask-image: radial-gradient(42% 46% at 50% 50%, transparent 45%, #000 100%);
}
.hero__inner { display: flex; flex-direction: column; align-items: center; gap: clamp(18px, 2.6vw, 28px); padding-bottom: 0; text-align: center; }
.hero__logo { width: clamp(240px, 28vw, 400px); height: auto; }
.hero__tag {
  margin: 0; font-family: var(--font-display); font-weight: 300; font-size: clamp(.68rem, 1vw, .86rem);
  letter-spacing: .32em; padding-left: .32em; text-transform: uppercase; color: var(--ink);
}
.hero__tag b { font-weight: 300; color: var(--gold); }
@media (max-width: 720px) {
  .hero { align-items: center; }
  .hero__waves {
    background-size: 52px 26px;
    -webkit-mask-image: radial-gradient(70% 34% at 50% 50%, transparent 50%, #000 100%);
            mask-image: radial-gradient(70% 34% at 50% 50%, transparent 50%, #000 100%);
  }
  .hero__inner { padding-bottom: 6vh; }   /* clear of the floating bar */
  .hero__tag { letter-spacing: .24em; padding-left: .24em; }
}


/* ============================================================================
   SECTION EDGES + TEXTURES (after Saint Sushi)
   Each section meets the next on a soft wave with an amber line, the colour of
   the arch's backlight. Built the cheap way: a 22px strip per edge, two small
   masks, no animation, no JS. A section laps up over the one above in its own
   colour; above a photo, the section on top hangs down over it instead. The
   edges are in site-src/location.html:
     .edge--lap   above its section's top edge (the section's own colour)
     .edge--hang  at its section's top edge, flipped (the colour above)
     .edge--base  at its section's bottom edge (the colour below, used where
                  the section below is pinned and slides under this one)
   .edge--phone / .edge--wide: only on phones (<=720px) / only wider screens.
   ========================================================================== */
:root {
  /* seigaiha wave scales, in amber, barely there */
  --scales-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='none' stroke='%23C9A45C' stroke-opacity='0.045' stroke-width='1.2'%3E%3Cpath d='M-30 30 A30 30 0 0 1 30 30'/%3E%3Cpath d='M-21 30 A21 21 0 0 1 21 30'/%3E%3Cpath d='M-12 30 A12 12 0 0 1 12 30'/%3E%3C/g%3E%3Cg fill='none' stroke='%23C9A45C' stroke-opacity='0.045' stroke-width='1.2'%3E%3Cpath d='M30 30 A30 30 0 0 1 90 30'/%3E%3Cpath d='M39 30 A21 21 0 0 1 81 30'/%3E%3Cpath d='M48 30 A12 12 0 0 1 72 30'/%3E%3C/g%3E%3Cg fill='none' stroke='%23C9A45C' stroke-opacity='0.045' stroke-width='1.2'%3E%3Cpath d='M0 60 A30 30 0 0 1 60 60'/%3E%3Cpath d='M9 60 A21 21 0 0 1 51 60'/%3E%3Cpath d='M18 60 A12 12 0 0 1 42 60'/%3E%3C/g%3E%3Cg fill='none' stroke='%23C9A45C' stroke-opacity='0.045' stroke-width='1.2'%3E%3Cpath d='M60 60 A30 30 0 0 1 120 60'/%3E%3Cpath d='M69 60 A21 21 0 0 1 111 60'/%3E%3Cpath d='M78 60 A12 12 0 0 1 102 60'/%3E%3C/g%3E%3Cg fill='none' stroke='%23C9A45C' stroke-opacity='0.045' stroke-width='1.2'%3E%3Cpath d='M-30 90 A30 30 0 0 1 30 90'/%3E%3Cpath d='M-21 90 A21 21 0 0 1 21 90'/%3E%3Cpath d='M-12 90 A12 12 0 0 1 12 90'/%3E%3C/g%3E%3Cg fill='none' stroke='%23C9A45C' stroke-opacity='0.045' stroke-width='1.2'%3E%3Cpath d='M30 90 A30 30 0 0 1 90 90'/%3E%3Cpath d='M39 90 A21 21 0 0 1 81 90'/%3E%3Cpath d='M48 90 A12 12 0 0 1 72 90'/%3E%3C/g%3E%3C/svg%3E");
}
.edge { position: absolute; left: 0; right: 0; height: 22px; z-index: 6; pointer-events: none; }
/* each strip reaches 1px into the colour it continues, so the two never meet
   on the same part-covered pixel row (a hairline on phone screens); the masks
   are 4px taller than the strip, so the top row of the tile, which picks up a
   faint sliver of the filled bottom row, falls outside it */
.edge--lap { top: -21px; }
.edge--hang { top: -1px; height: 23px; transform: scaleY(-1); }
.edge--base { bottom: -1px; height: 23px; }
.edge::before, .edge::after { content: ""; position: absolute; inset: 0; }
.edge::before { background: var(--edge-fill);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='26' viewBox='0 -4 160 26'%3E%3Cpath d='M0 12 Q20 2 40 12 T80 12 T120 12 T160 12 V22 H0Z'/%3E%3C/svg%3E") 50% 100% / 160px 26px repeat-x;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='26' viewBox='0 -4 160 26'%3E%3Cpath d='M0 12 Q20 2 40 12 T80 12 T120 12 T160 12 V22 H0Z'/%3E%3C/svg%3E") 50% 100% / 160px 26px repeat-x; }
.edge::after { background: var(--edge-line);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='26' viewBox='0 -4 160 26'%3E%3Cpath d='M0 12 Q20 2 40 12 T80 12 T120 12 T160 12' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") 50% 100% / 160px 26px repeat-x;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='26' viewBox='0 -4 160 26'%3E%3Cpath d='M0 12 Q20 2 40 12 T80 12 T120 12 T160 12' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") 50% 100% / 160px 26px repeat-x; }
.edge { --edge-line: rgba(201,164,92,.9); }
.edge--paper { --edge-fill: var(--paper); }
.edge--panel { --edge-fill: var(--paper-2); }
.edge--bar   { --edge-fill: var(--bar); }
@media (min-width: 721px) { .edge--phone { display: none; } }
@media (max-width: 720px) { .edge--wide { display: none; } }

/* textures: the faint wave scales on every flat band, so the page reads as
   one piece (Opening Hours keeps its photo) */
.menu, #reservation, .order, .reviews, .gc, .faq, .gallery, .footer { background-image: var(--scales-dark); background-size: 60px 60px; }

/* ============================================================================
   MENU CARD (as on Tiradito) — one card: the intro, the tabs and the
   scrolling menu on the left, the photo filling the right side. Narrower
   screens put the photo on top as a banner.
   ========================================================================== */
.menu__head { text-align: center; justify-content: center; }
.menu__card {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  background: var(--paper); border: 1px solid var(--line); border-radius: 18px; overflow: hidden;
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.75);
}
.menu__body { padding: clamp(24px, 4vw, 56px); display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.menu__photo { margin: 0; position: relative; min-height: 100%; }
.menu__photo picture { display: contents; }
.menu__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* the panel sits straight on the card: no box of its own */
.menu__card .menu__panel { background: transparent; border: 0; border-radius: 0; min-height: 0; }
.menu__card .menu__panel--text { padding: 0; }
/* pill tabs, centred; the group being read is filled */
.menu__card .menu__tabs { justify-content: center; margin-bottom: 0; gap: 8px; }
.menu__card .menu__tab {
  border-radius: 999px; border: 1.5px solid rgba(243,234,219,.45); color: var(--ink);
  padding: .75em 1.3em; font-size: .7rem; letter-spacing: .1em;
}
.menu__card .menu__tab[aria-selected="true"] { background: var(--gold); border-color: var(--gold); color: var(--paper); }
.menu__card .menu__tab--pdf { border-color: var(--line); color: var(--ink-soft); }
.menu__card .menu__tab--pdf::before { color: var(--gold); }
@media (hover: hover) and (pointer: fine) {
  .menu__card .menu__tab:not([aria-selected="true"]):hover { border-color: var(--gold); color: var(--gold); background: transparent; }
}
/* a rule between sections */
.menu__card .tm__cat + .tm__cat { margin-top: .6rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }
@media (max-width: 960px) {
  .menu__card { grid-template-columns: minmax(0, 1fr); }
  .menu__photo { order: -1; min-height: 0; }
  .menu__photo img { position: static; aspect-ratio: 16 / 9; height: auto; }
}
/* phones: the thirteen tabs are one swipeable row instead of six wrapped rows */
@media (max-width: 720px) {
  .menu__card .menu__tabs {
    flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none;
    -webkit-overflow-scrolling: touch; margin-inline: calc(clamp(24px, 4vw, 56px) * -1);
    padding-inline: clamp(24px, 4vw, 56px); scroll-padding-inline: clamp(24px, 4vw, 56px);
  }
  .menu__card .menu__tabs::-webkit-scrollbar { display: none; }
  .menu__card .menu__tab { flex: none; white-space: nowrap; }
}

/* ============================================================================
   MENU IN ONE SCREEN — the section is exactly the screen's height, the fixed
   Reserve/Order bar reserved in its bottom padding. The card fills what the
   heading leaves, and only the list inside it scrolls.
   ========================================================================== */
#menu.menu {
  height: 100svh; min-height: 560px;
  display: flex; flex-direction: column;
  padding-block: clamp(16px, 3vh, 34px) calc(80px + env(safe-area-inset-bottom, 0px));
}
#menu > .container { flex: 1; min-height: 0; width: 100%; display: flex; flex-direction: column; }
#menu .menu__head { flex: none; margin-bottom: clamp(10px, 2vh, 20px); }
#menu .menu__head .display { font-size: clamp(1.9rem, 5.2vh, 3rem); }
#menu .menu__card { flex: 1; min-height: 0; }
.menu__card .menu__body { min-height: 0; padding: clamp(16px, 2.4vw, 34px); gap: clamp(10px, 1.6vh, 16px); }
.menu__card .menu__panel { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.menu__card .menu__view--text { flex: 1; min-height: 0; max-height: none; }
/* compact pills: thirteen categories in two or three rows, not four */
.menu__card .menu__tabs { gap: 6px; }
.menu__card .menu__tab { padding: .6em 1em; font-size: .64rem; letter-spacing: .08em; }
@media (max-width: 960px) {
  /* the photo becomes a short strip over the menu, and the list takes the rest */
  .menu__card { grid-template-rows: auto minmax(0, 1fr); }
  .menu__photo { height: clamp(84px, 14vh, 150px); }
  .menu__photo img { position: absolute; aspect-ratio: auto; height: 100%; }
}
@media (max-width: 720px) {
  #menu.menu { padding-top: calc(var(--nav-h) - 8px); }   /* the heading sits just under the menu button */
  .menu__card .menu__view--text { max-height: none; }
  /* phones: no photo in the menu card, the list gets the whole card (the
     image is lazy, so it is never downloaded there either) */
  .menu__photo { display: none; }
  .menu__card { grid-template-rows: minmax(0, 1fr); }
}

/* ============================================================================
   FLOATING BOOKING BAR (as on Tiradito) — a capsule over the page with
   Reserve in the logo's red and Order as an outline. It steps aside where it
   would cover what you came for (main.js initCtaBar).
   ========================================================================== */
.ctabar {
  position: fixed; z-index: 90; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  display: flex; gap: 6px; padding: 6px; border-radius: 999px;
  background: rgba(10,9,8,.86); border: 1px solid rgba(243,234,219,.12);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 14px 34px -12px rgba(0,0,0,.7);
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.ctabar.is-away { opacity: 0; pointer-events: none; transform: translate(-50%, 20px); }
.cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-width: 128px; padding: 1em 1.6em; border-radius: 999px;
  font: 600 .74rem/1 var(--font); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.cta--book { background: var(--accent); color: var(--on-accent); box-shadow: 0 8px 22px -10px rgba(201,164,92,.8); }
.cta--ghost { color: var(--ink); border: 1.5px solid rgba(243,234,219,.35); }
@media (hover: hover) and (pointer: fine) {
  .cta--book:hover { background: var(--accent-deep); }
  .cta--ghost:hover { border-color: var(--gold); color: var(--gold); }
}
.cta:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
@media (max-width: 720px) { .cta { min-width: 0; padding-inline: 1.4em; } }
@media (prefers-reduced-motion: reduce) { .ctabar { transition: none; } }

/* ============================================================================
   ORDERING (under the favourite rolls) — "the rolls do the asking": three
   rolls fanned out like plates, the line, then a row of pills. Our own
   ordering is the logo's red, the delivery apps are outlines.
   ========================================================================== */
/* its own section after booking; positioned so it paints over the pinned
   #about and is what the pinned #reviews slides under */
.order { background-color: var(--paper); position: relative; z-index: 1; }
.order-block { display: flex; flex-direction: column; align-items: center; text-align: center; }
.order-block__plates { display: flex; justify-content: center; margin-bottom: clamp(18px, 2.4vw, 26px); }
.order-block__plates picture { display: contents; }   /* each photo sits in its own <picture>, so the fan counts the pictures */
.order-block__plates img {
  width: clamp(92px, 11vw, 140px); aspect-ratio: 6 / 7; object-fit: cover;
  border-radius: 14px; border: 3px solid var(--paper);
  box-shadow: 0 18px 34px -16px rgba(0,0,0,.9);
  transition: transform .5s var(--ease);
}
.order-block__plates picture:nth-child(1) img { transform: rotate(-8deg) translateX(16px); }
.order-block__plates picture:nth-child(2) img { transform: translateY(-12px); position: relative; z-index: 1; }
.order-block__plates picture:nth-child(3) img { transform: rotate(8deg) translateX(-16px); }
@media (hover: hover) and (pointer: fine) {
  .order-block:hover .order-block__plates picture:nth-child(1) img { transform: rotate(-11deg) translateX(6px); }
  .order-block:hover .order-block__plates picture:nth-child(2) img { transform: translateY(-18px); }
  .order-block:hover .order-block__plates picture:nth-child(3) img { transform: rotate(11deg) translateX(-6px); }
}
.order-block .eyebrow { color: var(--gold); }
.order-block__title {
  margin: .7rem 0 0; max-width: 18ch;
  font: 700 clamp(1.9rem, 4vw, 3rem)/1.02 var(--font-display); letter-spacing: -.03em; color: var(--ink); text-wrap: balance;
}
.order-block__text { margin-top: .9rem; color: var(--ink-soft); font-size: 1.02rem; line-height: 1.6; max-width: 46ch; }
.order-block__btns { margin-top: clamp(18px, 2.4vw, 24px); display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.opill {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 1em 1.6em; border-radius: 999px; border: 1.5px solid rgba(243,234,219,.32);
  font: 600 .76rem/1 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); white-space: nowrap;
  transition: background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.opill--main { background: var(--accent); border-color: var(--accent); color: var(--on-accent); box-shadow: 0 14px 30px -14px rgba(201,164,92,.85); }
@media (hover: hover) and (pointer: fine) {
  .opill:hover { transform: translateY(-2px); }
  .opill--app:hover { border-color: var(--gold); color: var(--gold); }
  .opill--main:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
}
.opill:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
/* phones: our own ordering full width, the two apps side by side under it */
@media (max-width: 560px) {
  .order-block__btns { width: 100%; max-width: 420px; }
  .opill--main { flex: 1 1 100%; }
  .opill--app { flex: 1 1 calc(50% - 5px); padding-inline: 1em; }
}

/* ============================================================================
   RE-SKIN (Signé branding) — the pieces that are more than a token
   ========================================================================== */
/* Montserrat capitals run wider than the old face: the section headlines are
   set a step smaller, and the short titles get capitals too */
.gc .display { font-size: clamp(1.9rem, 4.4vw, 3.4rem); }
.order-block__title { font-weight: 800; text-transform: uppercase; letter-spacing: -.005em; font-size: clamp(1.7rem, 3.6vw, 2.7rem); max-width: 20ch; }
.tm__title { font-weight: 800; text-transform: uppercase; letter-spacing: .04em; font-size: 1rem; }
#menu .menu__head .display { font-size: clamp(1.8rem, 4.8vh, 2.8rem); }

/* ============================================================================
   CENTRED — every section reads down the middle, as the menu, the ordering
   and the reviews already did
   ========================================================================== */
.about .about__info, .contact__intro { text-align: center; }
.about .info-card { max-width: 420px; margin-inline: auto; }
.contact .form { width: 100%; }

/* no copy ends on a word alone on its line: browsers that can, balance short
   copy and avoid a lone last word in long copy (main.js keepLastWords also
   glues the last two words together, for the browsers that cannot) */
p, blockquote, figcaption, li, .tm__desc { text-wrap: pretty; }
.order-block__text, .about__text, .contact__note, .gc__text, .gc__note { text-wrap: balance; }

/* ============================================================================
   SCROLLING — the page glides onto the menu when you stop just short of it,
   and on touch screens the menu's list only takes a swipe once the menu fills
   the screen (main.js initMenuWheel sets .is-caught), so a swipe down the
   page never gets stuck in the list
   ========================================================================== */
@media (pointer: coarse) {
  #menu:not(.is-caught) .menu__view--text { overflow-y: hidden; }
}

/* the phone number in the contact note is a link */
.contact__phone { color: var(--ink); border-bottom: 1px solid var(--gold); white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { .contact__phone:hover { color: var(--gold); } }

/* Desktop schedule in two columns (Monday to Thursday, Friday to Sunday): half
   the height, so the whole week sits well clear of the floating bar on a
   laptop screen, and is in full view sooner on the way in */
@media (min-width: 721px) {
  .about .about__info { max-width: 680px; padding-block: 84px 120px; }
  .about .info-card { max-width: 620px; }
  .about .hours tbody {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(4, auto);
    grid-auto-flow: column; column-gap: 40px;
  }
  .about .hours tr { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid rgba(242,235,223,.18); }
  .about .hours td { border-bottom: 0; }
}

/* ============================================================================
   DRAWER LOGO — the whole gold wordmark on top of the drawer
   ========================================================================== */
.nav__links { justify-content: flex-start; }
.nav__mark { display: block; width: min(190px, 100%); flex: none; -webkit-tap-highlight-color: transparent; transition: transform .3s var(--ease); }
.nav__mark img { display: block; width: 100%; height: auto; filter: drop-shadow(0 2px 6px rgba(0,0,0,.6)); }
@media (hover: hover) and (pointer: fine) { .nav__mark:hover { transform: scale(1.05); } }
.nav__links .nav__group { margin-top: auto; margin-bottom: auto; }

/* ============================================================================
   ORDERING — seven rolls fanned on wider screens, the middle three on phones
   (each <picture> carries --i, its place from the middle, and --d, its distance)
   ========================================================================== */
.order-block__plates picture img {
  transform: rotate(calc(var(--i) * 6deg)) translateY(calc(var(--d) * 9px));
  margin-inline: -10px; position: relative; z-index: calc(10 - var(--d));
}
@media (hover: hover) and (pointer: fine) {
  .order-block:hover .order-block__plates picture img { transform: rotate(calc(var(--i) * 8deg)) translateY(calc(var(--d) * 12px - 8px)); }
}
@media (max-width: 720px) {
  .order-block__plates picture:nth-child(-n+2), .order-block__plates picture:nth-last-child(-n+2) { display: none; }
  .order-block__plates picture img { margin-inline: -8px; }
}

/* the gallery's fourth row, on wider screens only */
.gm__tile:nth-child(9) { grid-column: span 2; }
@media (max-width: 720px) { .gm__tile:nth-child(n+8) { display: none; } }

/* ============================================================================
   FAQ — questions down the middle, one open at a time
   ========================================================================== */
.faq { background-color: var(--bar); text-align: center; position: relative; z-index: 1; }
.faq .display { font-size: clamp(1.9rem, 4.4vw, 3rem); margin-bottom: clamp(16px, 2.4vw, 26px); }
.faq__list { max-width: 760px; margin-inline: auto; text-align: left; border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 18px 4px; cursor: pointer; list-style: none;
  font: 600 1.02rem/1.35 var(--font); color: var(--ink); -webkit-tap-highlight-color: transparent;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .faq__item summary:hover { color: var(--gold); } }
.faq__icon { position: relative; flex: none; width: 14px; height: 14px; }
.faq__icon::before, .faq__icon::after {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; margin-top: -.75px;
  background: var(--gold); transition: transform .3s var(--ease);
}
.faq__icon::after { transform: rotate(90deg); }
.faq__item[open] .faq__icon::after { transform: rotate(0deg); }
.faq__a { padding: 0 4px 20px; color: var(--ink-soft); line-height: 1.65; max-width: 64ch; display: grid; gap: .7em; }

/* ============================================================================
   VISIT (footer) — address, "Hey, call us!", "Follow us on social", the map
   ========================================================================== */
.visit {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 4vw, 56px);
  align-items: center; padding-bottom: clamp(28px, 4vw, 44px);
}
.visit__info { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; }
.visit__title { font-size: clamp(1.8rem, 4vw, 2.8rem); }
.visit__addr { font-style: normal; font-size: 1.05rem; line-height: 1.5; color: var(--ink); }
.visit__addr a:hover { color: var(--gold); opacity: 1; }
.visit__dir { font-size: .74rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.visit__block { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 10px; }
.visit__phone {
  font: 800 clamp(1.6rem, 3.4vw, 2.3rem)/1 var(--font-display); letter-spacing: .01em; color: var(--ink);
  border-bottom: 2px solid var(--gold); padding-bottom: 4px; white-space: nowrap;
}
@media (hover: hover) and (pointer: fine) { .footer .visit__phone:hover { color: var(--gold); opacity: 1; } }
.visit__nets { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.visit__net {
  display: inline-flex; align-items: center; gap: 10px; padding: .8em 1.3em; border-radius: 999px;
  border: 1.5px solid rgba(242,235,223,.3); font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink);
  transition: border-color .25s var(--ease), color .25s var(--ease);
}
.visit__net svg { width: 18px; height: 18px; }
@media (hover: hover) and (pointer: fine) { .footer .visit__net:hover { border-color: var(--gold); color: var(--gold); opacity: 1; } }
.visit__map {
  display: block; position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 640 / 420;
  border: 1px solid rgba(201,164,92,.35); box-shadow: 0 24px 50px -24px rgba(0,0,0,.8);
}
.visit__map img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
@media (hover: hover) and (pointer: fine) { .footer .visit__map:hover { opacity: 1; } .visit__map:hover img { transform: scale(1.03); } }
.visit__map:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
@media (max-width: 860px) {
  .visit { grid-template-columns: minmax(0, 1fr); }
}
/* short screens: the drawer keeps everything, the socials included, in view */
@media (max-height: 720px) {
  .nav__links { padding-top: calc(var(--nav-h) + 4px); padding-bottom: 22px; gap: 14px; }
  .nav__mark { width: 150px; }
  .nav__group { gap: 14px; }
  .nav__head { gap: 8px; padding-bottom: 12px; }
}

/* The schedule without rules or underlines: the address, the week and the
   status read as plain lines of type, centred */
.about .about__addr, .about .about__addr:hover { border-bottom: 0; padding-bottom: 0; }
.about .about__addr { display: block; text-align: center; margin-inline: auto; }
.about .info-card { border-top: 0; padding-top: .4rem; }
.about .hours td, .about .hours tr { border-bottom: 0 !important; }
.about .hours td { padding-block: .38em; }

/* No blue box on tap or click. A tap leaves no highlight, and a mouse click
   leaves no focus ring; the keyboard still gets a gold one. */
a, button, summary, input, textarea, select, [role="button"] { -webkit-tap-highlight-color: transparent; }
:focus:not(:focus-visible) { outline: none; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* Gift cards in one screen on phones: the fan sized to the screen's height,
   the four amounts on one row, tighter type, and room left at the foot for
   the floating Reserve / Order bar */
@media (max-width: 860px) {
  .gc.section-pad { padding-top: 34px; padding-bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }
  .gc__grid { gap: 14px; }
  .gc__fan { width: min(100%, calc(24svh * 4 / 3.1)); max-width: none; }
  .gc .display { font-size: clamp(1.7rem, 7.4vw, 2.4rem); margin: .4rem 0 .6rem; }
  .gc__text { font-size: 1rem; line-height: 1.5; margin-bottom: 1rem; }
  .gc__amounts { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 360px; gap: 6px; margin-bottom: 1rem; }
  .gc__amt { grid-column: auto; padding: .8em .2em; }
  .gc__note { margin-top: .8rem; }
}
@media (max-width: 860px) and (max-height: 620px) {
  .gc.section-pad { padding-top: 22px; }
  .gc__fan { width: min(100%, calc(19svh * 4 / 3.1)); }
  .gc .display { font-size: clamp(1.5rem, 6.6vw, 2rem); }
  .gc__text { font-size: .95rem; margin-bottom: .8rem; }
}

/* Contact: the slate panel with the faint wave scales at every size (it used
   to sit on a photo of the room on wider screens) */
.contact, .contact.section-pad { background: var(--paper-2) var(--scales-dark) 0 0 / 60px 60px; }
.contact::before { content: none; }

/* "Frequently asked questions" on two lines on a phone, not three */
@media (max-width: 560px) { .faq .display { font-size: clamp(1.3rem, 6.5vw, 1.9rem); } }

/* ============================================================================
   TON GARDE-MANGER — the sister brand (shared.sister), in its own peach and
   Outfit so it reads as a sister brand: A the card in the drawer, C the line
   under the ordering buttons, F the line in the footer
   ========================================================================== */
:root { --tgm-peach: #EFA181; --tgm-ink: #0B0C0A; --tgm-cream: #F5ECD9; --tgm-font: "Outfit", "Inter", system-ui, sans-serif; }
.tgm-card {
  display: grid; gap: 6px; width: 100%; padding: 11px 12px; border-radius: 8px; text-align: left;
  background: #121212; border: 1px solid rgba(239,161,129,.45); box-shadow: 0 10px 26px -16px rgba(239,161,129,.6);
  -webkit-tap-highlight-color: transparent; transition: border-color .25s var(--ease), transform .25s var(--ease);
}
@media (hover: hover) and (pointer: fine) { .tgm-card:hover { border-color: var(--tgm-peach); transform: translateY(-1px); } }
.tgm-card__top { display: flex; justify-content: space-between; align-items: start; gap: 8px; }
.tgm-word { display: block; font: 700 .9rem/1 var(--tgm-font); letter-spacing: .02em; text-transform: uppercase; color: var(--tgm-cream); white-space: nowrap; }
.tgm-by { display: block; margin-top: 4px; font: 500 .56rem/1 var(--font); letter-spacing: .2em; text-transform: uppercase; color: var(--tgm-peach); }
.tgm-tag { flex: none; font: 700 .52rem/1 var(--tgm-font); letter-spacing: .12em; text-transform: uppercase; padding: 4px 7px 3px; border-radius: 4px; background: var(--tgm-peach); color: var(--tgm-ink); }
.tgm-card__text { font: 400 .72rem/1.4 var(--font); color: var(--ink-soft); }
.tgm-card__go { font: 700 .62rem/1 var(--tgm-font); letter-spacing: .14em; text-transform: uppercase; color: var(--tgm-peach); }
/* short screens: the card keeps its name and its link, the line goes */
@media (max-height: 860px) { .tgm-card { padding: 9px 11px; gap: 5px; } .tgm-card__text { display: none; } }
@media (max-height: 600px) { .tgm-card__go { display: none; } }

.tgm-pill {
  display: inline-flex; align-items: center; gap: 8px; padding: .95em 1.5em; border-radius: 999px;
  background: var(--tgm-peach); color: var(--tgm-ink); font: 700 .74rem/1 var(--tgm-font); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
  -webkit-tap-highlight-color: transparent; transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
@media (hover: hover) and (pointer: fine) { .tgm-pill:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -12px rgba(239,161,129,.8); } .footer .tgm-pill:hover { opacity: 1; } }
.tgm-grab {
  margin-top: clamp(16px, 2.2vw, 22px); padding-top: clamp(14px, 2vw, 18px); border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; max-width: 560px;
}
.tgm-grab__text { color: var(--ink-soft); font-size: .92rem; }
.visit__also { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 12px; margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--line); }
.visit__also span { color: var(--ink-soft); font-size: .84rem; }
/* with the Ton Garde-Manger card in it, the drawer's gaps stay modest so it
   all fits, and very short screens tighten further */
.nav__links { gap: 12px; }   /* the menu group's auto margins take the spare room, so the drawer never overflows */
@media (max-height: 640px) {
  .nav__links { gap: 10px; padding-top: calc(var(--nav-h) - 6px); padding-bottom: 14px; }
  .nav__mark { width: 120px; }
  .nav__group { gap: 9px; }
  .nav__head { gap: 5px; padding-bottom: 8px; }
}

/* The drawer, tidied: the "Nouveau" tag sits on the card's top edge at the
   right, so the name keeps the full width and the tag is never cut off by the
   drawer's edge; the close X is smaller; and the drawer's foot is raised, so
   the card and the socials sit higher, clear of a phone's browser bar */
.tgm-card { position: relative; margin-top: 8px; }
.tgm-tag { position: absolute; top: 0; right: 14px; transform: translateY(-50%); box-shadow: 0 0 0 3px #131417; }
.nav__links { padding-left: clamp(26px, 5vw, 34px); padding-right: clamp(26px, 5vw, 34px); padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
/* on computers the X shrinks to the phone's size (the burger itself stays large) */
@media (min-width: 721px) {
  .nav__burger { transform-origin: left center; transition: transform .3s var(--ease); }
  .nav__burger.is-active { transform: scale(.62); }
}
/* the smaller X frees room at the top, so the logo moves up (short screens have their own) */
@media (min-width: 721px) and (min-height: 721px) { .nav__links { padding-top: calc(var(--nav-h) + 6px); } }
@media (max-height: 720px) { .nav__links { padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px)); } }
@media (max-height: 640px) { .nav__links { padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px)); } }

/* The FAQ fits one screen, like the menu: the title stays put, and the questions scroll in their own window,
   which only takes the scroll once the section fills the screen
   (main.js initMenuWheel, .is-caught). Room is left at the foot for the
   floating Reserve / Order bar. A fade at the foot says "more below". */
.faq.section-pad {
  display: flex; flex-direction: column; max-height: 100vh; max-height: 100svh;
  padding-top: clamp(28px, 4vw, 56px); padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px));
}
.faq > .container { display: flex; flex-direction: column; min-height: 0; width: 100%; }
.faq .display { flex: none; }
.faq__list {
  flex: 0 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior-y: auto; -webkit-overflow-scrolling: touch;
  padding-right: 6px; scrollbar-width: thin; scrollbar-color: var(--gold-deep) transparent; border-bottom: 1px solid var(--line);
  -webkit-mask-image: linear-gradient(#000 calc(100% - 44px), transparent); mask-image: linear-gradient(#000 calc(100% - 44px), transparent);
}
.faq__list.is-end { -webkit-mask-image: none; mask-image: none; }
.faq__item:last-child { border-bottom: 0; }
@media (pointer: coarse) {
  #faq:not(.is-caught) .faq__list { overflow-y: hidden; }
}
/* "Find us" in the drawer lands on the footer's address, clear of the top bar */
#visit { scroll-margin-top: 24px; }
/* with "Find us" in the drawer, mid-height screens keep a slightly lower foot */
@media (min-height: 721px) and (max-height: 860px) { .nav__links { padding-bottom: calc(48px + env(safe-area-inset-bottom, 0px)); } }

/* No copy on the site can be selected. Form fields stay selectable, or typing
   and correcting a message would break (Safari needs the explicit text value). */
html { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
input, textarea, select, [contenteditable="true"] { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }

/* The FAQ says it scrolls: a gold pill under the list while more questions
   are below ("Scroll to see all 15 questions ↓", gone at the end), its arrow
   nudging down, and on computers a scrollbar that is always there */
.faq__hint {
  flex: none; align-self: center; display: inline-flex; align-items: center; gap: 8px; margin-top: 12px;
  padding: .7em 1.3em; border-radius: 999px; border: 1px solid rgba(201,164,92,.55); background: rgba(201,164,92,.10);
  color: var(--gold-bright, var(--gold)); font: 600 .74rem/1 var(--font); letter-spacing: .12em; text-transform: uppercase; cursor: pointer;
}
.faq__hint-arrow { display: inline-block; font-size: 1rem; animation: faq-nudge 1.6s ease-in-out infinite; }
@keyframes faq-nudge { 0%, 100% { transform: translateY(-1px); } 50% { transform: translateY(3px); } }
@media (hover: hover) and (pointer: fine) { .faq__hint:hover { background: rgba(201,164,92,.2); } }
.faq__list::-webkit-scrollbar { width: 6px; }
.faq__list::-webkit-scrollbar-track { background: rgba(242,235,223,.08); border-radius: 3px; }
.faq__list::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 3px; }
.faq__list { scrollbar-color: var(--gold) rgba(242,235,223,.08); }
@media (max-width: 560px) { .faq__hint { font-size: .68rem; letter-spacing: .08em; margin-top: 10px; } }

/* Contact on wider screens: the copy on the left, read from its left edge,
   and the form on its panel to the right, the two
   centred on each other (phones keep the single centred column) */
@media (min-width: 900px) {
  .contact .contact__grid {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); max-width: 1040px;
    gap: clamp(40px, 6vw, 88px); align-items: center;
  }
  .contact .contact__intro { text-align: left; }
  .contact .contact__intro .display { font-size: clamp(2.4rem, 4.4vw, 3.6rem); margin-bottom: 1rem; }
  .contact [data-contact-intro] { font-size: 1.12rem; line-height: 1.6; max-width: 34ch; text-wrap: pretty; }
  .contact .contact__note { margin-top: 1.1rem; font-size: .95rem; max-width: 38ch; text-wrap: pretty; }
  .contact .form { gap: 12px; }
  .contact .form textarea { min-height: 150px; }
  .contact .form button { justify-self: start; }
}

/* ============================================================================
   THE MENU AS ITS PDF — the owner's printed menu (NOV 2026): cream paper,
   black Times-style serif (Tinos), letter-spaced capitals, gold prices and a
   gold rule with a diamond under each heading, and the black wave-scale
   corners. Only the menu card's text side; the photo beside it is unchanged.
   ========================================================================== */
.menu__card .menu__body {
  --mp-paper: #f0e6d8; --mp-ink: #1d1b19; --mp-soft: #5e5850; --mp-gold: #b08a55; --mp-line: rgba(176,138,85,.7);
  --mp-font: "Tinos", "Times New Roman", Times, serif;
  position: relative; isolation: isolate; background: var(--mp-paper); color: var(--mp-ink); font-family: var(--mp-font);
}
/* the corners: a black disc ringed with fine gold arcs, top left and bottom right */
.menu__card .menu__body::before, .menu__card .menu__body::after {
  content: ""; position: absolute; z-index: -1; width: 190px; height: 190px; border-radius: 50%; pointer-events: none;
  background:
    repeating-radial-gradient(circle at 50% 50%, transparent 0 9px, rgba(176,138,85,.75) 9px 10px),
    #1d1b19;
}
.menu__card .menu__body::before { left: -112px; top: -112px; }
.menu__card .menu__body::after  { right: -112px; bottom: -112px; }
/* the bottom-right disc lies over the list's fade-out (as the PDF's corner art lies over the
   page): under it, the cream fade washed the disc into a pale square */
.menu__card .menu__body::after  { z-index: 2; }
/* tabs: thin outlined pills in the menu's own type; the open one in ink */
.menu__card .menu__tab {
  font-family: var(--mp-font); text-transform: uppercase; letter-spacing: .12em; font-weight: 400;
  color: var(--mp-ink); border: 1px solid rgba(29,27,25,.35); background: transparent;
}
.menu__card .menu__tab[aria-selected="true"] { background: var(--mp-ink); border-color: var(--mp-ink); color: var(--mp-paper); }
.menu__card .menu__tab--pdf { border-color: var(--mp-gold); color: var(--mp-gold); }
.menu__card .menu__tab--pdf::before { color: var(--mp-gold); }
@media (hover: hover) and (pointer: fine) {
  .menu__card .menu__tab:not([aria-selected="true"]):hover { border-color: var(--mp-gold); color: var(--mp-gold); background: transparent; }
}
/* headings: centred capitals over a gold rule broken by a diamond */
.menu__card .tm__head { flex-direction: column; align-items: center; gap: 6px; text-align: center; border-bottom: 0; padding-bottom: 0; margin-bottom: 1.1rem; }
.menu__card .tm__title {
  font-family: var(--mp-font); font-weight: 400; font-size: clamp(1.35rem, 2.4vw, 1.7rem); letter-spacing: .1em; text-transform: uppercase; color: var(--mp-ink);
}
.menu__card .tm__title::after {
  content: ""; display: block; margin: 10px auto 0; width: min(320px, 80%); height: 10px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 0l5 5-5 5-5-5z' fill='%23b08a55'/%3E%3C/svg%3E") center / 8px 8px no-repeat,
              linear-gradient(var(--mp-line), var(--mp-line)) left 50% / calc(50% - 12px) 1px no-repeat,
              linear-gradient(var(--mp-line), var(--mp-line)) right 50% / calc(50% - 12px) 1px no-repeat;
}
.menu__card .tm__note { font-family: var(--mp-font); font-style: italic; text-transform: none; letter-spacing: 0; font-size: .92rem; color: var(--mp-soft); }
.menu__card .tm__cols { margin: 2px 0 0; align-self: stretch; justify-content: flex-end; font-family: var(--mp-font); font-size: .7rem; letter-spacing: .14em; color: var(--mp-gold); }
.menu__card .tm__cols span { min-width: 4.2em; text-align: right; }
/* dishes: letter-spaced capitals, a faint gold leader, the price in gold */
.menu__card .tm__list { gap: .85rem; }
.menu__card .tm__name { font-family: var(--mp-font); font-weight: 400; font-size: 1.02rem; letter-spacing: .06em; text-transform: uppercase; color: var(--mp-ink); }
.menu__card .tm__dots { border-bottom: 1px dotted var(--mp-line); }
.menu__card .tm__price { font-family: var(--mp-font); font-weight: 400; font-size: 1.02rem; color: var(--mp-gold); }
.menu__card .tm__price--two span { min-width: 4.2em; text-align: right; }
.menu__card .tm__desc { font-family: var(--mp-font); font-size: .95rem; line-height: 1.45; color: var(--mp-soft); }
.menu__card .tm__opts { font-family: var(--mp-font); color: var(--mp-soft); }
.menu__card .tm__opt b { color: var(--mp-gold); font-weight: 400; }
/* between sections, the same gold rule and diamond as the PDF */
.menu__card .tm__cat + .tm__cat { border-top: 0; margin-top: 1rem; padding-top: 1.6rem; position: relative; }
.menu__card .tm__cat + .tm__cat::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);
  width: min(420px, 90%); height: 10px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 0l5 5-5 5-5-5z' fill='%23b08a55'/%3E%3C/svg%3E") center / 8px 8px no-repeat,
              linear-gradient(var(--mp-line), var(--mp-line)) left 50% / calc(50% - 12px) 1px no-repeat,
              linear-gradient(var(--mp-line), var(--mp-line)) right 50% / calc(50% - 12px) 1px no-repeat;
}
/* the list scrolls on the cream paper: its fade and scrollbar match it */
.menu__card .menu__panel--text::after { background: linear-gradient(rgba(240,230,216,0), var(--mp-paper)); }
.menu__card .menu__view--text { scrollbar-color: var(--mp-gold) transparent; }
@media (max-width: 720px) {
  .menu__card .menu__body::before, .menu__card .menu__body::after { width: 130px; height: 130px; }
  .menu__card .menu__body::before { left: -84px; top: -84px; }
  .menu__card .menu__body::after  { right: -84px; bottom: -84px; }
  .menu__card .tm__name, .menu__card .tm__price { font-size: .95rem; }
}

/* Phones: the menu scrolls in its own box, but a box SHORTER than the screen,
   with page above and below it. The whole menu (80 dishes) in a screen-tall
   box trapped a swipe: once a visitor reached it, every swipe scrolled the
   list and getting past meant reading all of it. Now a swipe on the list
   scrolls the list, a swipe anywhere else scrolls the page, and the page no
   longer glides onto the menu (main.js initMenuWheel). */
/* the wines: name, then the grape in italics on the same line; price "15 $ / 69 $" */
.menu__card .tm__group--inline .tm__name { font-size: .92rem; letter-spacing: .04em; }
.menu__card .tm__grape { font: italic 400 .95rem/1.3 var(--mp-font); color: var(--mp-soft); white-space: nowrap; }
.menu__card .tm__grape::before { content: "· "; font-style: normal; }
@media (max-width: 720px) {
  #menu.menu { height: auto; min-height: 0; }
  #menu .menu__card { flex: none; }
  .menu__card .menu__panel { flex: none; }
  #menu .menu__card .menu__view--text, #menu:not(.is-caught) .menu__card .menu__view--text {
    overflow-y: auto; flex: none; height: 58svh; max-height: 58svh; overscroll-behavior-y: auto; touch-action: pan-y;
  }
  /* phones: two lines a wine: the name across the width, then grape … price */
  .menu__card .tm__group--inline .tm__row { flex-wrap: wrap; row-gap: 2px; }
  .menu__card .tm__group--inline .tm__name { font-size: .76rem; letter-spacing: .01em; }
  /* only a wine with a grape takes two lines; one without (Coup de cœur) keeps its
     leader and price on the name's line, so the leader never starts at the edge */
  .menu__card .tm__group--inline .tm__row--grape .tm__name { flex: 0 0 100%; }
  .menu__card .tm__group--inline .tm__grape::before { content: none; }
  .menu__card .tm__group--inline .tm__price { font-size: .9rem; }
}

/* a price "8 $ / 9 $" as three cells (price, slash, price), each half a fixed
   width, so the slashes line up down the column whatever the digits */
.tm__price--slash { display: inline-flex; align-items: baseline; gap: .35em; }
.tm__price--slash > span:first-child { min-width: 2.6em; text-align: right; }
.tm__price--slash > span:last-child { min-width: 2.6em; text-align: left; }