/* ==========================================================================
   KUMA · bistrot & wine bar, Rabat
   --------------------------------------------------------------------------
   The house is a French bistrot run with a Japanese hand: walnut, brass, a
   cherry-blossom mural and a burgundy that comes straight off the printed
   carte. The site is built on paper rather than on darkness, so the room's own
   photography supplies the dark, and the type is set the way the wordmark is:
   thin, geometric, widely tracked.

   Motion signature is the shoji wipe. Nothing fades up; things open sideways.
   ========================================================================== */

/* ---------------------------------------------------------------- tokens -- */
:root {
  --paper:      #F7F2E9;
  --paper-2:    #F0E8DB;
  --paper-3:    #E5D9C7;
  --oxblood:    #5C1520;
  --oxblood-2:  #7C2231;
  --night:      #2B0E13;
  --night-2:    #1B080C;
  --ink:        #2A1F1C;
  --muted:      #726259;
  --sakura:     #C97F87;
  --celadon:    #8B9E82;
  --line:       rgba(92, 21, 32, .15);
  --line-soft:  rgba(92, 21, 32, .08);
  --line-cream: rgba(247, 242, 233, .18);

  /* Bricolage Grotesque carries the interface. Irregular widths and a lopsided
     g and R, so the navigation reads drawn rather than defaulted. It replaced a
     thin geometric sans, which set in widely tracked capitals is the most
     recognisable stock look on the web and was making the chrome generic. */
  --display: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
  /* Section titles are set by hand rather than typeset. Caveat Brush is the
     licensable stand-in for the marker face the client picked, which is sold
     for personal use only and cannot go on a commercial site. */
  --script:  'Caveat Brush', 'Segoe Script', cursive;
  --body:    'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --serif:   'Zen Old Mincho', 'Hiragino Mincho ProN', Georgia, serif;

  --gutter: clamp(20px, 5vw, 76px);
  --maxw: 1320px;
  --nav-h: 78px;
  --promo-h: 0px;

  /* The shoji wipe. Slow to start, then decisive, like a screen being slid. */
  --shoji: cubic-bezier(.22, .68, .16, 1);
  --ease: cubic-bezier(.4, .1, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16.5px;
  font-weight: 350;
  line-height: 1.68;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
::selection { background: var(--oxblood); color: var(--paper); }

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

.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.hidden { display: none !important; }

/* Announced by a screen reader, never painted. */
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--oxblood); color: var(--paper);
  padding: 12px 20px; font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
}
.skip-link:focus { left: 0; }

/* ------------------------------------------------------------ typography -- */
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -.018em;
  margin: 0;
}

.section-title {
  font-family: var(--script);
  font-size: clamp(2.6rem, 5.8vw, 4.9rem);
  font-weight: 400;
  letter-spacing: .002em;
  line-height: 1.08;
  color: var(--oxblood);
  margin-bottom: 22px;
}
.section-title em {
  font-style: normal;
  font-weight: 400;
  color: var(--oxblood-2);
}
.band-dark .section-title em, .bacchus .section-title em { color: var(--sakura); }

.kicker {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--display);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--oxblood-2);
  margin-bottom: 22px;
}
.kicker::before {
  content: ''; width: 34px; height: 1px; background: currentColor; opacity: .5;
}

.lede {
  font-size: clamp(1.02rem, 1.5vw, 1.18rem);
  color: var(--muted);
  max-width: 56ch;
}

.section-sub { color: var(--muted); max-width: 58ch; margin: 0 0 34px; }

/* -------------------------------------------------------------- sections -- */
.section { padding: clamp(76px, 11vw, 152px) 0; position: relative; }
.section--tight { padding: clamp(56px, 8vw, 104px) 0; }

/* The numbered rail. On wide screens the ordinal sits in the left margin,
   rotated, the way a Japanese book runs its running head down the page. */
.section-head { position: relative; text-align: center; }
.section-head .lede,
.section-head .section-sub { margin-inline: auto; }
/* A centred header wants air under it before the composition starts. */
#house > .container > .section-head { margin-bottom: clamp(38px, 5vw, 66px); }
.bacchus-inner { margin-inline: auto; text-align: center; }
.bacchus-inner .btn { margin-inline: auto; }

/* Dark bands. The room's photography is what supplies the night. */
.band-dark { background: var(--night); color: var(--paper); }
.band-dark .section-title { color: var(--paper); }
.band-dark .kicker { color: var(--sakura); }
.band-dark .lede,
.band-dark .section-sub { color: rgba(247, 242, 233, .68); }

/* ---------------------------------------------------------------- motion -- */
/* The shoji wipe: a panel slid open from the leading edge.
   Everything here is scoped to .js. Without it the page is fully visible, so a
   blocked or broken script leaves a readable site rather than a blank one. */
.js .reveal {
  clip-path: inset(0 100% 0 0);
  opacity: .001;
  transition: clip-path 1.05s var(--shoji), opacity .5s linear;
}
.js .reveal.visible { clip-path: inset(0 0 0 0); opacity: 1; }

.js .reveal-rise {
  transform: translateY(26px);
  opacity: 0;
  transition: transform .9s var(--shoji), opacity .7s var(--ease);
}
.js .reveal-rise.visible { transform: none; opacity: 1; }

.reveal-d1 { transition-delay: .09s; }
.reveal-d2 { transition-delay: .18s; }
.reveal-d3 { transition-delay: .27s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal, .js .reveal-rise { clip-path: none; opacity: 1; transform: none; transition: none; }
  .petal, .marquee-track, .promo-track, .kb { animation: none !important; }
}

/* ------------------------------------------------------------- promo bar -- */
.promo-banner {
  position: fixed; inset: 0 0 auto 0; z-index: 120;
  background: var(--oxblood);
  color: var(--paper);
  overflow: hidden;
  height: 38px; display: flex; align-items: center;
}
.promo-track { display: flex; white-space: nowrap; animation: promo-slide linear infinite; }
.promo-banner-text {
  font-family: var(--display); font-size: 12px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  padding-inline: 26px;
}
a.promo-banner-text:hover { color: var(--sakura); }
@keyframes promo-slide { to { transform: translateX(-50%); } }

/* -------------------------------------------------------------------- nav -- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  transition: background .45s var(--ease), border-color .45s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav-inner { height: var(--nav-h); display: flex; align-items: center; gap: 26px; }
.nav.scrolled {
  background: rgba(247, 242, 233, .94);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom-color: var(--line-soft);
}

.nav-logo { flex: 0 0 auto; margin-right: auto; line-height: 0; }
.nav-logo img { height: 34px; width: auto; }
.nav-logo .mark-ink { display: none; }
.nav.scrolled .nav-logo .mark-cream { display: none; }
.nav.scrolled .nav-logo .mark-ink { display: block; }
/* Pages that open on paper rather than on a photograph start inked. */
.nav.on-paper .nav-logo .mark-cream { display: none; }
.nav.on-paper .nav-logo .mark-ink { display: block; }

.nav-links, .nav-right { list-style: none; display: flex; align-items: center; gap: 26px; margin: 0; padding: 0; }
.nav-links a, .nav-right a {
  font-family: var(--display);
  font-size: 15px; font-weight: 500; letter-spacing: 0;
  color: var(--paper);
  position: relative; padding: 6px 0;
  transition: color .3s var(--ease);
}
.nav.scrolled .nav-links a, .nav.scrolled .nav-right a,
.nav.on-paper .nav-links a, .nav.on-paper .nav-right a { color: var(--ink); }
.nav-links a::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: 0;
  height: 1px; background: currentColor; opacity: .9;
  transition: right .4s var(--shoji);
}
.nav-links a:hover::after { right: 0; }

.nav-cta {
  border: 1px solid currentColor;
  padding: 9px 18px !important;
  transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.nav-cta:hover { background: var(--oxblood); border-color: var(--oxblood); color: var(--paper) !important; }
.nav-deals { color: var(--sakura) !important; }
.nav-auth.signed-in { color: var(--sakura) !important; }

.lang-switch {
  position: relative; display: inline-flex;
  border: 1px solid currentColor; border-radius: 999px;
  color: var(--paper); opacity: .85;
}
.nav.scrolled .lang-switch, .nav.on-paper .lang-switch { color: var(--ink); }
.lang-switch button {
  position: relative; z-index: 1; background: none; border: 0; cursor: pointer;
  font-family: var(--display); font-size: 12px; font-weight: 500; letter-spacing: .02em;
  padding: 5px 11px; color: inherit; transition: color .3s var(--ease);
}
.lang-switch button.active { color: var(--paper) !important; }
.lang-knob {
  position: absolute; top: 2px; bottom: 2px; left: 2px; width: calc(50% - 2px);
  background: var(--oxblood); border-radius: 999px;
  transition: transform .42s var(--shoji);
}
.lang-switch.on-fr .lang-knob { transform: translateX(100%); }

.burger {
  display: none; background: none; border: 0; cursor: pointer;
  width: 40px; height: 24px; padding: 0; flex-direction: column; justify-content: space-between;
}
.burger span {
  display: block; height: 1px; background: var(--paper);
  transition: transform .4s var(--shoji), opacity .25s linear, background .3s var(--ease);
}
.nav.scrolled .burger span, .nav.menu-open .burger span, .nav.on-paper .burger span { background: var(--ink); }
.burger.open span:nth-child(1) { transform: translateY(11px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { transform: translateY(-11px) rotate(-45deg); }

.mobile-only { display: none; }

@media (max-width: 1080px) {
  .burger { display: flex; }
  .mobile-only { display: block; }
  .nav-right > li:not(.keep-mobile) { display: none; }
  .nav-links {
    position: fixed; inset: 0; z-index: -1;
    background: var(--paper);
    flex-direction: column; align-items: flex-start; justify-content: center;
    gap: 6px; padding: 0 var(--gutter);
    clip-path: inset(0 0 100% 0);
    transition: clip-path .6s var(--shoji);
  }
  .nav-links.open { clip-path: inset(0 0 0 0); }
  .nav-links a { color: var(--ink) !important; font-size: 23px; letter-spacing: -.01em; padding: 11px 0; }
  .nav-links .lang-switch { color: var(--ink); margin-top: 18px; }
  .nav.menu-open { background: var(--paper); border-bottom-color: transparent; }
  .nav.menu-open .nav-logo .mark-cream { display: none; }
  .nav.menu-open .nav-logo .mark-ink { display: block; }
}

/* ------------------------------------------------------------------ hero -- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: flex-end;
  overflow: hidden;
  background: var(--night);
}
.hero-bg { position: absolute; inset: 0; }
.hero-bg video, .hero-bg img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.94) contrast(1.03);
}
/* Two scrims, not one. The vertical pass buys the headline its contrast; the
   horizontal pass keeps the left third dark enough for the buttons without
   flattening the bar itself, which is the reason for the photograph. */
.hero-bg::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(20, 5, 9, .95) 0%, rgba(20, 5, 9, .72) 26%, rgba(20, 5, 9, .22) 58%, rgba(20, 5, 9, .55) 100%),
    linear-gradient(to right, rgba(20, 5, 9, .8) 0%, rgba(20, 5, 9, .34) 42%, transparent 72%);
}
.kb { animation: kenburns 28s ease-in-out infinite alternate; }
@keyframes kenburns { to { transform: scale(1.09) translate3d(-1.5%, -1%, 0); } }

.hero-inner {
  position: relative; z-index: 2;
  width: 100%;
  padding-bottom: clamp(56px, 9vh, 108px);
  padding-top: calc(var(--nav-h) + 40px);
}

/* The arc lifted out of the wordmark: the U that doubles as a glass. Drawn
   rather than faded in, which is the one gesture the whole page is built on. */
.hero-arc { width: 38px; height: 33px; margin-bottom: 18px; overflow: visible; opacity: .72; }
.hero-arc path, .hero-arc line {
  fill: none; stroke: var(--sakura); stroke-width: 2.6;
  stroke-linecap: round;
  stroke-dasharray: 220; stroke-dashoffset: 220;
  animation: draw 1.9s var(--shoji) .35s forwards;
}
@media (prefers-reduced-motion: reduce) { .hero-arc path, .hero-arc line { animation: none; stroke-dashoffset: 0; } }
@keyframes draw { to { stroke-dashoffset: 0; } }

.hero-title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.7rem, 7.4vw, 6.6rem);
  line-height: 1;
  letter-spacing: -.038em;
  color: var(--paper);
  max-width: 15ch;
  margin: 0 0 24px;
}
.hero-title em {
  font-family: var(--serif); font-style: normal; font-weight: 400;
  color: var(--sakura);
}
.hero-tag {
  font-family: var(--display);
  font-size: clamp(11.5px, 1.3vw, 13.5px); font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase;
  color: rgba(247, 242, 233, .8);
  margin: 0 0 36px;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

.hero-meta {
  position: absolute; right: var(--gutter); bottom: clamp(56px, 9vh, 108px); z-index: 2;
  writing-mode: vertical-rl;
  font-family: var(--display); font-size: 11px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(247, 242, 233, .55);
  display: flex; align-items: center; gap: 18px;
}
.hero-meta::after { content: ''; width: 1px; height: 62px; background: currentColor; opacity: .5; }
@media (max-width: 860px) { .hero-meta { display: none; } }

/* Petals. Seven of them, no more: the point is that you notice one, not a
   snowstorm. */
.petals { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.petal {
  position: absolute; top: -6%;
  width: 11px; height: 11px;
  background: var(--sakura);
  opacity: 0;
  border-radius: 76% 24% 66% 34% / 44% 62% 38% 56%;
  animation: petal-fall linear infinite;
}
@keyframes petal-fall {
  0%   { opacity: 0;   transform: translate3d(0, 0, 0) rotate(0deg); }
  8%   { opacity: .5; }
  85%  { opacity: .26; }
  100% { opacity: 0;   transform: translate3d(90px, 112vh, 0) rotate(420deg); }
}
.petal:nth-child(1) { left: 8%;  animation-duration: 19s; animation-delay: 0s;   }
.petal:nth-child(2) { left: 23%; animation-duration: 25s; animation-delay: 4s;   width: 8px; height: 8px; }
.petal:nth-child(3) { left: 39%; animation-duration: 22s; animation-delay: 9s;   }
.petal:nth-child(4) { left: 54%; animation-duration: 28s; animation-delay: 2s;   width: 9px; height: 9px; }
.petal:nth-child(5) { left: 69%; animation-duration: 21s; animation-delay: 13s;  }
.petal:nth-child(6) { left: 82%; animation-duration: 26s; animation-delay: 6s;   width: 7px; height: 7px; }
.petal:nth-child(7) { left: 93%; animation-duration: 23s; animation-delay: 16s;  }

/* --------------------------------------------------------------- buttons -- */
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--display); font-size: 14.5px; font-weight: 600;
  letter-spacing: .005em;
  padding: 14px 26px;
  border: 1px solid currentColor; background: none; cursor: pointer;
  position: relative; isolation: isolate; overflow: hidden;
  transition: color .45s var(--ease), border-color .45s var(--ease), background .45s var(--ease);
}
.btn.solid { background: var(--oxblood); border-color: var(--oxblood); color: var(--paper); }
.btn.solid:hover { background: var(--night); border-color: var(--night); }
.btn.ghost { color: var(--oxblood); }
.btn.ghost:hover { background: var(--oxblood); color: var(--paper); border-color: var(--oxblood); }
.btn.on-dark { color: var(--paper); }
.btn.on-dark:hover { background: var(--paper); color: var(--night); border-color: var(--paper); }
.btn.solid-cream { background: var(--paper); border-color: var(--paper); color: var(--night); }
.btn.solid-cream:hover { background: var(--sakura); border-color: var(--sakura); color: var(--night); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--display); font-size: 14px; font-weight: 500; letter-spacing: .01em;
  color: var(--oxblood);
  border-bottom: 1px solid var(--line);
  padding-bottom: 6px;
  transition: gap .35s var(--shoji), border-color .35s var(--ease);
}
.link-arrow:hover { gap: 18px; border-bottom-color: var(--oxblood); }
.band-dark .link-arrow { color: var(--paper); border-bottom-color: var(--line-cream); }
.band-dark .link-arrow:hover { border-bottom-color: var(--paper); }

/* -------------------------------------------------------------- marquee --- */
.marquee { background: var(--oxblood); color: var(--paper); padding: 17px 0; overflow: hidden; }
.marquee-track { display: flex; white-space: nowrap; animation: promo-slide 38s linear infinite; }
.marquee-track span {
  font-family: var(--display); font-size: clamp(11.5px, 1.2vw, 13px); font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase;
  padding-inline: 26px; opacity: .92;
}
.marquee-track span::after { content: '◆'; margin-left: 26px; font-size: 7px; vertical-align: middle; opacity: .5; }

/* ----------------------------------------------------------------- about -- */
.about-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(34px, 6vw, 90px);
  align-items: center;
}
.about-copy p { color: var(--muted); }
.about-facts {
  list-style: none; margin: 34px 0; padding: 0;
  border-top: 1px solid var(--line);
}
.about-facts li {
  display: flex; align-items: baseline; gap: 18px;
  padding: 15px 0; border-bottom: 1px solid var(--line);
}
.about-facts .f-key {
  font-family: var(--display); font-size: 11px; letter-spacing: .26em; text-transform: uppercase;
  color: var(--oxblood-2); min-width: 128px;
}
.about-facts .f-val { font-size: 15.5px; color: var(--ink); }

/* Two plates, offset. The second breaks the baseline so the pair reads as a
   composition rather than a row. */
.about-plates { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.about-plates figure { margin: 0; overflow: hidden; }
.about-plates img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--shoji); }
.about-plates figure:hover img { transform: scale(1.05); }
.about-plates .plate-a { aspect-ratio: 4 / 5; }
.about-plates .plate-b { aspect-ratio: 4 / 5; margin-top: clamp(30px, 7vw, 76px); }
.about-seal {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: clamp(88px, 11vw, 118px); aspect-ratio: 1;
  background: var(--paper); border: 1px solid var(--line);
  display: grid; place-items: center; text-align: center;
  font-family: var(--display); font-size: 10.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  color: var(--oxblood); line-height: 1.7;
  border-radius: 50%;
}

@media (max-width: 900px) { .about-grid { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------ carte tease -- */
.carte-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.carte-card {
  background: var(--paper); padding: clamp(28px, 3.6vw, 46px);
  display: flex; flex-direction: column; gap: 14px;
  position: relative; overflow: hidden; isolation: isolate;
  transition: color .5s var(--ease);
}
.carte-card::after {
  content: ''; position: absolute; inset: 0; background: var(--oxblood); z-index: -1;
  transform: translateY(101%); transition: transform .6s var(--shoji);
}
.carte-card:hover::after { transform: translateY(0); }
.carte-card:hover, .carte-card:hover h3, .carte-card:hover p,
.carte-card:hover .cc-num, .carte-card:hover .cc-go { color: var(--paper); }
.cc-num { font-family: var(--serif); font-size: 13px; letter-spacing: .2em; color: var(--sakura); }
.carte-card h3 { font-size: clamp(1.45rem, 2.3vw, 1.9rem); font-weight: 500; color: var(--oxblood); }
.carte-card p { margin: 0; color: var(--muted); font-size: 15px; flex: 1; }
.cc-go {
  font-family: var(--display); font-size: 13.5px; font-weight: 500; letter-spacing: .01em;
  color: var(--oxblood); display: inline-flex; gap: 9px; align-items: center;
}
@media (max-width: 860px) { .carte-grid { grid-template-columns: 1fr; } }

/* Menu columns, shared between the preview and the full carte */
/* Columns rather than a grid: a short category next to a long one leaves half
   a screen of dead paper in a grid row, and the carte has plenty of both. */
.menu-cols { columns: 2; column-gap: clamp(28px, 5vw, 72px); }
@media (max-width: 780px) { .menu-cols { columns: 1; } }

.menu-cat { break-inside: avoid; margin-bottom: clamp(34px, 4vw, 54px); }
.menu-cols > .menu-cat:last-child { margin-bottom: 0; }
.menu-cat h3 {
  font-family: var(--display); font-size: 13.5px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--oxblood);
  padding-bottom: 12px; margin-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.menu-cat-sub { margin: -12px 0 18px; font-size: 13px; color: var(--muted); font-style: italic; }
.menu-item { display: flex; align-items: baseline; gap: 10px; margin-top: 15px; }
.mi-name { font-size: 16px; color: var(--ink); }
.mi-dots { flex: 1; border-bottom: 1px dotted var(--line); transform: translateY(-4px); }
.mi-price { font-family: var(--display); font-size: 15px; font-weight: 500; letter-spacing: 0; color: var(--oxblood); white-space: nowrap; }
.mi-was { color: var(--muted); opacity: .7; margin-right: 8px; font-size: 13px; }
.mi-deal { color: var(--celadon); font-weight: 500; }
.menu-item-desc { margin: 4px 0 0; font-size: 13.5px; color: var(--muted); max-width: 48ch; }

.menu-tabs { display: inline-flex; border: 1px solid var(--line); margin-bottom: 40px; }
.menu-tabs button {
  background: none; border: 0; cursor: pointer;
  font-family: var(--display); font-size: 14px; font-weight: 500; letter-spacing: .01em;
  padding: 12px 24px; color: var(--muted);
  transition: background .4s var(--shoji), color .4s var(--ease);
}
.menu-tabs button.active { background: var(--oxblood); color: var(--paper); }

/* --------------------------------------------------------------- bacchus -- */
.bacchus { position: relative; overflow: hidden; background: var(--night); color: var(--paper); }
.bacchus-bg { position: absolute; inset: 0; }
.bacchus-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .45; }
.bacchus-bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(27, 8, 12, .94), rgba(27, 8, 12, .4));
}
.bacchus-inner { position: relative; z-index: 1; padding: clamp(72px, 10vw, 132px) 0; max-width: 620px; }
.bacchus-hours {
  font-family: var(--serif); font-size: clamp(2.4rem, 6vw, 4.2rem);
  color: var(--sakura); line-height: 1; margin: 8px 0 20px;
}
.bacchus-inner p { color: rgba(247, 242, 233, .72); }

/* ---------------------------------------------------------------- spaces -- */
.spaces-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.space { position: relative; overflow: hidden; aspect-ratio: 4 / 5; display: flex; align-items: flex-end; }
.space img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.3s var(--shoji), filter .6s var(--ease);
  filter: saturate(.9);
}
.space::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(27, 8, 12, .9), rgba(27, 8, 12, .04) 62%);
}
.space:hover img { transform: scale(1.07); filter: saturate(1.05); }
.space-body { position: relative; z-index: 1; padding: clamp(22px, 2.6vw, 34px); color: var(--paper); }
.space-body h3 { font-size: clamp(1.35rem, 2.2vw, 1.85rem); font-weight: 500; }
.space-body p { margin: 8px 0 0; font-size: 14px; color: rgba(247, 242, 233, .7); }
.space-rule { width: 30px; height: 1px; background: var(--sakura); margin-bottom: 16px; }
@media (max-width: 900px) { .spaces-grid { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------- gallery -- */
/* A brick wall rather than a carousel: the room deserves to be looked at, not
   scrolled past. Tiles wipe in one after another, and each photograph drifts a
   little inside its own frame as the wall passes, so the wall breathes without
   anything sliding around under the reader. */
.gallery-wall {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 12vw);
  gap: 14px;
}

/* Every tile is placed by hand. Dense auto-flow was packing ten tiles of mixed
   footprint into fourteen cells, which over four columns is three and a half
   rows, and the half left the last photograph sitting alone beside two empty
   columns. These ten positions cover a four by four grid exactly: one wide
   banner, five portraits and four squares, no holes and no orphan.

     A A B C        A  1  wide
     D E B C        B C D G H  portrait
     D F G H        E F I J    square
     I J G H

   An eleventh photograph would fall through to an implicit row; add it here
   and rebalance rather than letting it flow. */
.gw-p1  { grid-column: 1 / 3; grid-row: 1 / 2; }
.gw-p2  { grid-column: 3 / 4; grid-row: 1 / 3; }
.gw-p3  { grid-column: 4 / 5; grid-row: 1 / 3; }
.gw-p4  { grid-column: 1 / 2; grid-row: 2 / 4; }
.gw-p5  { grid-column: 2 / 3; grid-row: 2 / 3; }
.gw-p6  { grid-column: 2 / 3; grid-row: 3 / 4; }
.gw-p7  { grid-column: 3 / 4; grid-row: 3 / 5; }
.gw-p8  { grid-column: 4 / 5; grid-row: 3 / 5; }
.gw-p9  { grid-column: 1 / 2; grid-row: 4 / 5; }
.gw-p10 { grid-column: 2 / 3; grid-row: 4 / 5; }

.gw-item {
  overflow: hidden; cursor: zoom-in; position: relative;
  background: var(--paper-3); border: 0; padding: 0;
  display: block;
}

/* The stagger. --i is set per tile in the markup; the wall adds .lit once it is
   on screen, and each tile opens a beat after the one before it. */
.js .gw-item {
  clip-path: inset(0 100% 0 0);
  opacity: .001;
  transition:
    clip-path .75s var(--shoji) calc(var(--i, 0) * 55ms),
    opacity .4s linear calc(var(--i, 0) * 55ms);
}
.js .gallery-wall.lit .gw-item { clip-path: inset(0 0 0 0); opacity: 1; }

/* The drift. --drift is written by the scroll handler, in pixels, and is small
   on purpose: it should be felt rather than watched. */
.gw-item img {
  width: 100%; height: 112%;
  object-fit: cover; display: block;
  transform: translate3d(0, calc(var(--drift, 0px) - 6%), 0) scale(1);
  transition: transform 1.1s var(--shoji), filter .6s var(--ease);
  will-change: transform;
}
.gw-item:hover img, .gw-item:focus-visible img {
  transform: translate3d(0, calc(var(--drift, 0px) - 6%), 0) scale(1.07);
}

/* A wash of the house colour, and a wipe of night behind the caption. */
.gw-item::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(23, 7, 10, .94) 0%, rgba(23, 7, 10, .62) 22%, rgba(23, 7, 10, .12) 48%, transparent 70%);
  opacity: 0; transition: opacity .5s var(--ease);
  pointer-events: none;
}
.gw-item:hover::after, .gw-item:focus-visible::after { opacity: 1; }

.gw-cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 16px 18px;
  text-align: left; pointer-events: none;
  transform: translateY(12px); opacity: 0;
  transition: transform .55s var(--shoji), opacity .4s var(--ease);
}
.gw-item:hover .gw-cap, .gw-item:focus-visible .gw-cap { transform: none; opacity: 1; }
.gw-cap b {
  display: block;
  font-family: var(--body); font-weight: 500; font-size: 13.5px; line-height: 1.35;
  color: var(--paper);
}
.gw-cap i {
  display: block; margin-top: 4px;
  font-family: var(--serif); font-style: normal; font-size: 11.5px;
  letter-spacing: .14em; color: var(--sakura);
}

/* The corner mark, drawn on hover: two strokes of an opening bracket. */
.gw-mark {
  position: absolute; top: 14px; right: 14px; width: 20px; height: 20px;
  opacity: 0; transform: scale(.7) rotate(-8deg);
  transition: opacity .4s var(--ease), transform .5s var(--shoji);
  pointer-events: none;
}
.gw-mark::before, .gw-mark::after {
  content: ''; position: absolute; background: var(--paper);
}
.gw-mark::before { top: 0; right: 0; width: 100%; height: 1.5px; }
.gw-mark::after { top: 0; right: 0; width: 1.5px; height: 100%; }
.gw-item:hover .gw-mark, .gw-item:focus-visible .gw-mark { opacity: .9; transform: none; }

.gw-item:focus-visible { outline: 2px solid var(--sakura); outline-offset: 3px; }

@media (max-width: 900px) {
  /* Two columns, and the same rule applies: ten tiles plus two portraits is
     twelve cells, which is exactly six rows. */
  .gallery-wall {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(6, 30vw);
    gap: 10px;
  }
  .gw-p1  { grid-column: 1 / 2; grid-row: 1 / 3; }
  .gw-p2  { grid-column: 2 / 3; grid-row: 1 / 2; }
  .gw-p3  { grid-column: 2 / 3; grid-row: 2 / 3; }
  .gw-p4  { grid-column: 1 / 2; grid-row: 3 / 4; }
  .gw-p5  { grid-column: 2 / 3; grid-row: 3 / 5; }
  .gw-p6  { grid-column: 1 / 2; grid-row: 4 / 5; }
  .gw-p7  { grid-column: 1 / 2; grid-row: 5 / 6; }
  .gw-p8  { grid-column: 2 / 3; grid-row: 5 / 6; }
  .gw-p9  { grid-column: 1 / 2; grid-row: 6 / 7; }
  .gw-p10 { grid-column: 2 / 3; grid-row: 6 / 7; }
  /* Nothing hovers on a phone, so anything shown here is shown permanently.
     A two-line caption on a tile this size needs a wash deep enough to swallow
     the photograph underneath it, which is the wrong trade in a gallery. Only
     the short tag stays, in a chip that carries its own ground, and the full
     caption waits for the viewer where there is room for it. */
  .gw-cap { opacity: 1; transform: none; padding: 9px 10px; }
  .gw-cap b { display: none; }
  .gw-cap i {
    display: inline-block; margin: 0;
    background: rgba(18, 5, 8, .78);
    color: var(--paper);
    font-family: var(--display); font-style: normal;
    font-size: 10px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
    padding: 4px 8px;
  }
  .gw-item::after {
    opacity: 1;
    background: linear-gradient(to top, rgba(18, 5, 8, .5) 0%, transparent 38%);
  }
  .gw-mark { display: none; }
}

/* -------------------------------------------------------------- lightbox -- */
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  display: none;
  --lb-pad: clamp(14px, 3vw, 40px);
}
.lightbox.open { display: block; }

.lb-veil {
  position: absolute; inset: 0;
  /* Opaque, so the navigation behind cannot ghost through and compete with the
     caption, but graded rather than flat: the photograph sits in a room. */
  background: radial-gradient(125% 95% at 50% 40%, #2A0D12 0%, #150507 60%, #0C0204 100%);
  opacity: 0; transition: opacity .42s var(--ease);
}
.lightbox.shown .lb-veil { opacity: 1; }

/* The stage holds the photograph. It is a grid so the image is centred without
   the caption bar or the filmstrip ever overlapping it. */
.lb-stage {
  position: absolute; inset: 0;
  touch-action: pan-y;
}
.lb-figure {
  position: absolute;
  top: calc(var(--lb-pad) + 44px);
  right: var(--lb-pad);
  bottom: calc(var(--lb-pad) + 104px);
  left: var(--lb-pad);
  margin: 0;
  /* Flex, not grid. A grid row sized auto grows to its item, so a percentage
     max-height on that item resolves against the image itself and caps nothing.
     A flex item measures against the container box, which here is definite. */
  display: flex; align-items: center; justify-content: center;
}
.lb-figure img {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  object-fit: contain; display: block;
  box-shadow: 0 40px 90px rgba(0, 0, 0, .5);
}

/* The flight. The image is placed over the tile that was clicked and released
   to its resting place, so the reader keeps hold of where the photograph came
   from. The transform is written by the script; the transition lives here. */
.lb-figure img {
  transform: translate3d(var(--fx, 0px), var(--fy, 0px), 0) scale(var(--fs, 1));
  opacity: var(--fo, 1);
}
.lightbox.flying .lb-figure img {
  transition: transform .52s var(--shoji), opacity .34s var(--ease);
}
/* While a neighbour is being fetched the photograph breathes, rather than the
   frame blanking and snapping back. */
.lb-figure.loading img { animation: lbBreathe 1.2s var(--ease) infinite; }
@keyframes lbBreathe { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(.78); } }

/* Chrome: the counter and caption at the top, the strip at the foot. Both slide
   in after the photograph has landed, so nothing competes with the arrival. */
.lb-head, .lb-foot {
  position: absolute; left: 0; right: 0;
  display: flex; align-items: center; gap: 18px;
  padding: 0 var(--lb-pad);
  opacity: 0; transition: opacity .4s var(--ease) .16s, transform .5s var(--shoji) .16s;
}
.lb-head { top: 0; height: calc(var(--lb-pad) + 44px); transform: translateY(-10px); }
.lb-foot { bottom: 0; height: calc(var(--lb-pad) + 104px); transform: translateY(12px); align-items: flex-end; padding-bottom: var(--lb-pad); }
.lightbox.shown .lb-head, .lightbox.shown .lb-foot { opacity: 1; transform: none; }

.lb-count {
  font-family: var(--serif); font-size: 14px; letter-spacing: .16em;
  color: var(--sakura); white-space: nowrap;
}
.lb-count b { color: var(--paper); font-weight: 400; }
.lb-title {
  font-family: var(--body); font-weight: 500; font-size: 14px;
  color: rgba(247, 242, 233, .92);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lb-head .lb-close { margin-left: auto; }

/* A hairline that fills as you move through the set. */
.lb-rail {
  position: absolute; left: var(--lb-pad); right: var(--lb-pad);
  bottom: calc(var(--lb-pad) + 92px); height: 1px;
  background: rgba(247, 242, 233, .16);
}
.lb-rail span {
  display: block; height: 100%; background: var(--sakura);
  width: var(--progress, 10%);
  transition: width .45s var(--shoji);
}

.lb-strip {
  display: flex; gap: 8px; overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none; -ms-overflow-style: none;
  padding: 2px 0; width: 100%;
  scroll-behavior: smooth;
}
.lb-strip::-webkit-scrollbar { display: none; }
.lb-thumb {
  flex: 0 0 auto; width: 64px; height: 64px;
  border: 1px solid transparent; padding: 0; background: none; cursor: pointer;
  opacity: .42; overflow: hidden;
  transition: opacity .35s var(--ease), border-color .35s var(--ease), transform .35s var(--shoji);
}
.lb-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lb-thumb:hover { opacity: .8; }
.lb-thumb.active { opacity: 1; border-color: var(--sakura); transform: translateY(-3px); }
.lb-thumb:focus-visible { outline: 2px solid var(--sakura); outline-offset: 2px; }

.lb-close, .lb-prev, .lb-next {
  background: none; border: 1px solid var(--line-cream);
  color: var(--paper); width: 46px; height: 46px; cursor: pointer;
  display: grid; place-items: center; font-size: 17px; line-height: 1;
  flex: 0 0 auto;
  transition: background .35s var(--ease), border-color .35s var(--ease), transform .35s var(--shoji);
}
.lb-close:hover, .lb-prev:hover, .lb-next:hover { background: var(--oxblood); border-color: var(--oxblood); }
.lb-prev:hover { transform: translateY(-50%) translateX(-3px); }
.lb-next:hover { transform: translateY(-50%) translateX(3px); }
.lb-close:focus-visible, .lb-prev:focus-visible, .lb-next:focus-visible { outline: 2px solid var(--sakura); outline-offset: 2px; }

.lb-prev, .lb-next {
  position: absolute; top: 50%; transform: translateY(-50%);
  opacity: 0; transition: opacity .4s var(--ease) .2s, background .35s var(--ease), border-color .35s var(--ease), transform .35s var(--shoji);
}
.lightbox.shown .lb-prev, .lightbox.shown .lb-next { opacity: 1; }
.lb-prev { left: var(--lb-pad); }
.lb-next { right: var(--lb-pad); }

/* A hint that the set can be swiped, shown once and only where it is true. */
.lb-hint {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--lb-pad) + 108px);
  font-family: var(--display); font-size: 11px; font-weight: 500; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(247, 242, 233, .5);
  pointer-events: none; opacity: 0;
}
.lightbox.shown .lb-hint.on { animation: lbHint 3.2s var(--ease) .5s both; }
@keyframes lbHint {
  0% { opacity: 0; transform: translateX(-50%) translateY(6px); }
  18%, 66% { opacity: 1; transform: translateX(-50%); }
  100% { opacity: 0; transform: translateX(-50%); }
}

@media (max-width: 760px) {
  .lb-figure { top: calc(var(--lb-pad) + 40px); bottom: calc(var(--lb-pad) + 92px); }
  .lb-prev, .lb-next { display: none; }   /* swipe is the gesture here */
  .lb-title { display: none; }
  .lb-thumb { width: 52px; height: 52px; }
  .lb-rail { bottom: calc(var(--lb-pad) + 80px); }
}

@media (prefers-reduced-motion: reduce) {
  .js .gw-item { clip-path: none; opacity: 1; transition: none; }
  .gw-item img { transform: none !important; transition: none; }
  .lb-veil, .lb-head, .lb-foot, .lb-prev, .lb-next { transition: none; }
  .lightbox.flying .lb-figure img { transition: none; }
  .lb-figure.loading img, .lightbox.shown .lb-hint.on { animation: none; }
}

/* ----------------------------------------------------------------- hours -- */
.info-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(34px, 6vw, 84px); align-items: start; }
.info-grid.no-map { grid-template-columns: 1fr; }
@media (max-width: 900px) { .info-grid { grid-template-columns: 1fr; } }

.hours-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.hours-list li {
  display: flex; align-items: baseline; gap: 12px;
  padding: 13px 0; border-bottom: 1px solid var(--line);
}
.hours-list .day { font-family: var(--display); font-size: 13.5px; font-weight: 500; letter-spacing: .01em; }
.hours-list .dots { flex: 1; border-bottom: 1px dotted var(--line); transform: translateY(-4px); }
.hours-list .time { font-family: var(--display); font-size: 14.5px; font-weight: 500; letter-spacing: 0; color: var(--oxblood); }
.band-dark .hours-list, .band-dark .hours-list li { border-color: var(--line-cream); }
.band-dark .hours-list .dots { border-bottom-color: var(--line-cream); }
.band-dark .hours-list .time { color: var(--sakura); }
.hours-list .closed { font-family: var(--display); font-size: 12.5px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; opacity: .5; }

#map { width: 100%; height: clamp(300px, 42vh, 460px); border: 1px solid var(--line-cream); filter: grayscale(.3) contrast(1.05); }
.leaflet-container { background: var(--night-2); font-family: var(--body) !important; }
.map-pin {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--sakura); border: 3px solid var(--paper);
  box-shadow: 0 0 0 6px rgba(201, 127, 135, .28);
}

/* --------------------------------------------------------------- contact -- */
.contact-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 14px; margin-top: 34px; }
.contact-card {
  display: flex; align-items: center; gap: 16px;
  border: 1px solid var(--line); padding: 20px;
  transition: border-color .4s var(--ease), background .4s var(--ease), transform .4s var(--shoji);
}
.contact-card:hover { border-color: var(--oxblood); transform: translateY(-3px); }
.band-dark .contact-card { border-color: var(--line-cream); }
.band-dark .contact-card:hover { border-color: var(--sakura); background: rgba(247, 242, 233, .04); }
.cc-icon { width: 20px; flex: 0 0 20px; color: var(--oxblood); }
.band-dark .cc-icon { color: var(--sakura); }
.cc-icon svg { width: 100%; height: auto; fill: currentColor; }
.cc-body { display: flex; flex-direction: column; min-width: 0; }
.cc-body small {
  font-family: var(--display); font-size: 11.5px; font-weight: 500; letter-spacing: .04em;
  color: var(--muted); margin-bottom: 4px;
}
.band-dark .cc-body small { color: rgba(247, 242, 233, .55); }
.cc-body b { font-weight: 400; font-size: 15px; overflow-wrap: anywhere; }

.socials { display: flex; gap: 12px; margin-top: 26px; }
.socials a {
  width: 42px; height: 42px; display: grid; place-items: center;
  border: 1px solid var(--line);
  transition: transform .4s var(--shoji), border-color .4s var(--ease), background .4s var(--ease);
}
.band-dark .socials a { border-color: var(--line-cream); }
.socials a:hover { transform: translateY(-3px); background: rgba(247, 242, 233, .06); }
.socials a svg, .socials a img { width: 21px; height: 21px; display: block; }

/* ------------------------------------------------------------- reservation */
.reserve-shell { display: grid; grid-template-columns: 1.18fr .82fr; gap: clamp(34px, 6vw, 88px); align-items: start; }
@media (max-width: 960px) { .reserve-shell { grid-template-columns: 1fr; } }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 22px; }
@media (max-width: 620px) { .form-grid { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: 8px; }
.field.full { grid-column: 1 / -1; }
.field label, .field > span.lbl {
  font-family: var(--display); font-size: 12.5px; font-weight: 500; letter-spacing: .01em;
  color: var(--muted);
}
.band-dark .field label, .band-dark .field > span.lbl { color: rgba(247, 242, 233, .6); }
.field small { font-size: 12px; color: var(--muted); }
.band-dark .field small { color: rgba(247, 242, 233, .45); }

input[type=text], input[type=email], input[type=password], input[type=tel],
input[type=date], input[type=number], select, textarea {
  width: 100%;
  background: transparent;
  border: 0; border-bottom: 1px solid var(--line);
  padding: 11px 2px;
  font-family: var(--body); font-size: 15.5px; color: var(--ink);
  transition: border-color .4s var(--ease);
  border-radius: 0;
}
.band-dark input, .band-dark select, .band-dark textarea { color: var(--paper); border-bottom-color: var(--line-cream); }
input:focus, select:focus, textarea:focus { outline: none; border-bottom-color: var(--oxblood); }
.band-dark input:focus, .band-dark select:focus { border-bottom-color: var(--sakura); }
input::placeholder { color: var(--muted); opacity: .6; }
select { appearance: none; cursor: pointer; }
.band-dark select option { background: var(--night); color: var(--paper); }
input[type=date]::-webkit-calendar-picker-indicator { filter: invert(.4); cursor: pointer; }
.band-dark input[type=date]::-webkit-calendar-picker-indicator { filter: invert(1) opacity(.6); }

.phone-row { display: grid; grid-template-columns: 106px 1fr; gap: 12px; }

/* The owner's slots, and nothing else. The native picker offers hours the
   kitchen never takes and looks like a different website. */
.timepick { position: relative; }
.timepick-btn {
  width: 100%; text-align: left; background: none; cursor: pointer;
  border: 0; border-bottom: 1px solid var(--line);
  padding: 11px 2px; font-size: 15.5px; color: var(--muted);
  display: flex; justify-content: space-between; align-items: center;
}
.band-dark .timepick-btn { border-bottom-color: var(--line-cream); color: rgba(247, 242, 233, .6); }
.timepick-btn.chosen { color: var(--ink); }
.band-dark .timepick-btn.chosen { color: var(--paper); }
.timepick-btn::after { content: '▾'; font-size: 11px; transition: transform .35s var(--shoji); }
.timepick-btn.open::after { transform: rotate(180deg); }
.timepick-panel[hidden] { display: none; }
.timepick-panel {
  position: absolute; z-index: 12; top: calc(100% + 8px); left: 0; right: 0;
  max-height: 232px; overflow-y: auto;
  background: var(--paper); border: 1px solid var(--line);
  display: grid; grid-template-columns: repeat(3, 1fr);
  box-shadow: 0 18px 44px rgba(43, 14, 19, .2);
}
.band-dark .timepick-panel { background: var(--night-2); border-color: var(--line-cream); }
.timepick-slot {
  background: none; border: 0; cursor: pointer; padding: 11px 6px;
  font-family: var(--display); font-size: 14px; font-weight: 500; letter-spacing: 0;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.timepick-slot:hover, .timepick-slot.on { background: var(--oxblood); color: var(--paper); }

.form-note { font-size: 13px; color: var(--muted); margin: 18px 0 0; }
.band-dark .form-note { color: rgba(247, 242, 233, .55); }
.form-msg { margin: 16px 0 0; font-size: 14.5px; min-height: 1.2em; }
.form-msg.ok { color: var(--celadon); }
.form-msg.err { color: var(--sakura); }
.form-actions { margin-top: 30px; }
.prefill-note { font-size: 13px; color: var(--sakura); margin: 0 0 20px; }

.reserve-aside { border-left: 1px solid var(--line-cream); padding-left: clamp(20px, 3vw, 42px); }
@media (max-width: 960px) {
  .reserve-aside { border-left: 0; padding-left: 0; border-top: 1px solid var(--line-cream); padding-top: 30px; }
}
.reserve-steps { list-style: none; margin: 26px 0 0; padding: 0; counter-reset: step; }
.reserve-steps li {
  counter-increment: step; position: relative; padding-left: 46px; margin-bottom: 24px;
  font-size: 14.5px; color: rgba(247, 242, 233, .68);
}
.reserve-steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute; left: 0; top: 1px;
  font-family: var(--serif); font-size: 13px; color: var(--sakura); letter-spacing: .1em;
}
.reserve-steps b { display: block; color: var(--paper); font-weight: 400; font-size: 16px; margin-bottom: 3px; }

/* ---------------------------------------------------------------- footer -- */
footer { background: var(--night-2); color: rgba(247, 242, 233, .72); padding: clamp(58px, 8vw, 96px) 0 30px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr .8fr .8fr; gap: clamp(28px, 5vw, 70px); }
@media (max-width: 820px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-logo { height: 40px; width: auto; margin-bottom: 22px; }
.footer-grid p { font-size: 14.5px; max-width: 40ch; margin: 0; }
.footer-grid h4 {
  font-family: var(--display); font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--sakura); margin-bottom: 18px; font-weight: 600;
}
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 14.5px; }
.footer-grid ul a:hover { color: var(--paper); }
.footer-bottom {
  margin-top: clamp(40px, 6vw, 66px); padding-top: 24px;
  border-top: 1px solid var(--line-cream);
  display: flex; flex-wrap: wrap; gap: 12px 26px; justify-content: space-between;
  font-family: var(--display); font-size: 12.5px; font-weight: 400; letter-spacing: .01em;
  color: rgba(247, 242, 233, .5);
}
.footer-bottom a:hover { color: var(--paper); }
.footer-bottom nav { display: flex; gap: 22px; flex-wrap: wrap; }

/* ------------------------------------------------------------- page hero -- */
.page-hero {
  position: relative; overflow: hidden;
  background: var(--night);
  padding: calc(var(--nav-h) + clamp(60px, 10vw, 118px)) 0 clamp(52px, 8vw, 96px);
  color: var(--paper);
}
.page-hero-bg { position: absolute; inset: 0; }
.page-hero-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .4; }
.page-hero-bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(27, 8, 12, .95), rgba(27, 8, 12, .5));
}
.page-hero .container { position: relative; z-index: 1; text-align: center; }
.page-hero .kicker { color: var(--sakura); }
.page-hero h1 {
  font-family: var(--script);
  font-size: clamp(2.8rem, 6.8vw, 5.2rem); font-weight: 400; letter-spacing: .002em;
  line-height: 1.08; color: var(--paper); margin: 0;
}
.page-hero h1 em { font-style: normal; color: var(--sakura); }
.page-hero p { color: rgba(247, 242, 233, .7); max-width: 54ch; margin: 18px auto 0; }

/* --------------------------------------------------------------- account -- */
.auth-wrap { min-height: 100svh; display: grid; grid-template-columns: 1fr 1fr; background: var(--paper); }
@media (max-width: 940px) { .auth-wrap { grid-template-columns: 1fr; } }

.auth-visual { position: relative; overflow: hidden; background: var(--night); }
@media (max-width: 940px) { .auth-visual { display: none; } }
.auth-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.auth-visual::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(27, 8, 12, .92), rgba(27, 8, 12, .25));
}
.auth-visual-body {
  position: absolute; z-index: 1; left: clamp(28px, 4vw, 62px); right: clamp(28px, 4vw, 62px);
  bottom: clamp(34px, 5vw, 66px); color: var(--paper);
}
.auth-visual-body h2 {
  font-family: var(--script); font-size: clamp(2rem, 3.4vw, 2.9rem);
  font-weight: 400; letter-spacing: .002em;
}
.auth-visual-body p { color: rgba(247, 242, 233, .68); margin-top: 12px; max-width: 34ch; }

.auth-panel {
  display: flex; flex-direction: column; justify-content: center;
  padding: calc(var(--nav-h) + 46px) clamp(24px, 5vw, 84px) 56px;
}
.auth-card { width: 100%; max-width: 480px; margin-inline: auto; }
.auth-card h1 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); font-weight: 400; color: var(--oxblood); margin-bottom: 12px; }
.auth-sub { color: var(--muted); margin: 0 0 32px; font-size: 15px; }
.auth-form { display: grid; gap: 20px; }
.auth-msg { font-size: 14px; min-height: 1.2em; }
.auth-msg.ok { color: var(--celadon); }
.auth-msg.err { color: var(--oxblood-2); }
.auth-switch { margin-top: 26px; font-size: 14.5px; color: var(--muted); }
.auth-switch button {
  background: none; border: 0; cursor: pointer; padding: 0;
  color: var(--oxblood); border-bottom: 1px solid var(--line); font-size: inherit;
}
.auth-switch button:hover { border-bottom-color: var(--oxblood); }
.auth-row { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; }
.auth-two { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 520px) { .auth-two { grid-template-columns: 1fr; } }
.check-row { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--muted); }
.check-row input { width: 16px; height: 16px; accent-color: var(--oxblood); }
.link-quiet { background: none; border: 0; padding: 0; cursor: pointer; font-size: 14px; color: var(--muted); border-bottom: 1px solid var(--line); }
.link-quiet:hover { color: var(--oxblood); border-bottom-color: var(--oxblood); }

.pw-field { position: relative; display: block; }
.pw-field input { padding-right: 40px; }
.pw-eye {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  background: none; border: 0; cursor: pointer; padding: 6px; color: var(--muted);
}
.pw-eye svg { width: 19px; height: 19px; fill: currentColor; }
.pw-eye .eye-shut { display: none; }
.pw-eye.on .eye-open { display: none; }
.pw-eye.on .eye-shut { display: block; }

.acc-head { display: flex; align-items: center; gap: 20px; margin-bottom: 8px; }
.acc-avatar {
  width: 74px; height: 74px; border-radius: 50%; object-fit: cover; flex: 0 0 74px;
  border: 1px solid var(--line); background: var(--paper-2);
  display: grid; place-items: center;
  font-family: var(--display); font-size: 24px; color: var(--oxblood);
}
.acc-block { border-top: 1px solid var(--line); padding-top: 26px; margin-top: 34px; }
.acc-block h2 {
  font-family: var(--display); font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--oxblood); margin-bottom: 18px;
}
.res-row {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 15px 0; border-bottom: 1px solid var(--line-soft);
}
.res-when { font-family: var(--display); font-size: 15px; letter-spacing: .04em; }
.res-meta { color: var(--muted); font-size: 14px; }
.res-status {
  margin-left: auto;
  font-family: var(--display); font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
  padding: 5px 12px; border: 1px solid currentColor;
}
.res-status.pending { color: #9C7526; }
.res-status.confirmed { color: #5F7355; }
.res-status.cancelled { color: var(--oxblood-2); opacity: .7; }

.two-fa-box { border: 1px solid var(--line); padding: 22px; display: grid; gap: 16px; justify-items: start; }
.two-fa-box img { width: 190px; border: 1px solid var(--line); }
.recovery-codes {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px;
  font-family: var(--display); font-size: 14px; letter-spacing: .08em;
  background: var(--paper-2); padding: 16px; width: 100%;
}

/* boot cover, so a signed-in page never paints its signed-out state first */
.page-boot {
  position: fixed; inset: 0; z-index: 300;
  background: var(--paper);
  display: grid; place-items: center;
  transition: opacity .26s linear;
}
.page-boot.gone { opacity: 0; pointer-events: none; }
.page-boot img { width: 128px; opacity: .85; animation: boot-pulse 1.7s ease-in-out infinite; }
@keyframes boot-pulse { 50% { opacity: .35; } }

/* ----------------------------------------------------------------- deals -- */
.deal-group { margin-bottom: clamp(40px, 6vw, 72px); }
.deal-group h2 {
  font-family: var(--display); font-size: 13.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--oxblood); padding-bottom: 12px; border-bottom: 1px solid var(--line); margin-bottom: 26px;
}
.deal-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; }
.deal-card {
  position: relative; border: 1px solid var(--line); overflow: hidden;
  transition: transform .5s var(--shoji), border-color .4s var(--ease);
}
.deal-card:hover { transform: translateY(-4px); border-color: var(--oxblood); }
.deal-card img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.deal-body { padding: 20px; }
.deal-body h3 { font-size: 1.2rem; font-weight: 400; margin-bottom: 6px; }
.deal-body p { margin: 0 0 14px; font-size: 14px; color: var(--muted); }
.deal-prices { display: flex; align-items: baseline; gap: 12px; font-family: var(--display); }
.deal-prices s { color: var(--muted); font-size: 14px; }
.deal-prices b { color: #5F7355; font-size: 20px; font-weight: 500; }
.deal-badge {
  position: absolute; top: 14px; right: 14px;
  background: var(--oxblood); color: var(--paper);
  font-family: var(--display); font-size: 12px; font-weight: 600; letter-spacing: .02em; padding: 5px 11px;
}
.deals-empty { text-align: center; padding: clamp(40px, 8vw, 90px) 20px; color: var(--muted); }
.contact-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 26px; }

/* ----------------------------------------------------------------- legal -- */
.legal-body { max-width: 74ch; }
.legal-body h2 {
  font-family: var(--display); font-size: 13.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--oxblood); margin: 40px 0 14px;
}
.legal-body p { color: var(--muted); margin: 0 0 14px; }
.legal-updated {
  font-family: var(--display); font-size: 12px; font-weight: 500; letter-spacing: .04em;
  color: var(--muted);
}

.doc-cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(26px, 4vw, 56px); }
@media (max-width: 800px) { .doc-cols { grid-template-columns: 1fr; } }
.doc-cols h2 {
  font-family: var(--display); font-size: 13.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--oxblood); margin-bottom: 16px;
}
.doc-cols ul { margin: 0; padding-left: 18px; color: var(--muted); display: grid; gap: 10px; font-size: 15px; }
.doc-note { border-left: 2px solid var(--oxblood); padding-left: 18px; color: var(--ink); margin: 26px 0; }

/* ------------------------------------------------------------------- 404 -- */
.oops {
  min-height: 100svh; display: grid; place-items: center; text-align: center;
  background: var(--night); color: var(--paper); padding: 40px;
}
.oops h1 { font-family: var(--serif); font-size: clamp(4rem, 18vw, 11rem); font-weight: 400; color: var(--sakura); line-height: .9; }
.oops p { color: rgba(247, 242, 233, .68); margin: 18px 0 32px; }

/* ------------------------------------------------------------ menu page --- */
.menu-jump {
  position: sticky; top: calc(var(--nav-h) + var(--promo-h));
  z-index: 40;
  background: rgba(247, 242, 233, .96);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line-soft);
  padding: 14px 0;
}
.menu-jump-inner { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.menu-jump-inner::-webkit-scrollbar { display: none; }
.menu-jump button {
  flex: 0 0 auto; background: none; border: 1px solid var(--line); cursor: pointer;
  font-family: var(--display); font-size: 13px; font-weight: 500; letter-spacing: .01em;
  padding: 8px 16px; color: var(--muted); white-space: nowrap;
  transition: background .35s var(--shoji), color .35s var(--ease), border-color .35s var(--ease);
}
.menu-jump button.active, .menu-jump button:hover { background: var(--oxblood); border-color: var(--oxblood); color: var(--paper); }

.menu-section { padding: clamp(44px, 6vw, 78px) 0 0; scroll-margin-top: calc(var(--nav-h) + 76px); }
.menu-section:last-child { padding-bottom: clamp(60px, 9vw, 120px); }
.menu-section-head {
  display: flex; align-items: baseline; gap: 18px; margin-bottom: 32px;
  padding-bottom: 14px; border-bottom: 1px solid var(--line);
}
.menu-section-head h2 {
  font-family: var(--script); font-size: clamp(2rem, 3.8vw, 2.9rem);
  font-weight: 400; letter-spacing: .002em; color: var(--oxblood);
}
.menu-section-head span {
  font-family: var(--display); font-size: 12.5px; font-weight: 500; letter-spacing: .02em;
  color: var(--muted); margin-left: auto;
}
.menu-note { border: 1px solid var(--line); padding: 22px 26px; font-size: 14.5px; color: var(--muted); }

@media print {
  .nav, footer, .menu-jump, .promo-banner, .page-hero-bg, .lightbox { display: none !important; }
  body { background: #fff; }
  .menu-section { break-inside: avoid; }
}

/* ------------------------------------------------- account extras -------- */
/* Class names the account script already writes; kept here so the markup and
   the script never have to be edited in lockstep. */
.res-card {
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  padding: 16px 0; border-bottom: 1px solid var(--line-soft);
}
.res-when, .res-meta { display: flex; flex-direction: column; }
.res-when b {
  font-family: var(--display); font-size: 20px; font-weight: 300;
  letter-spacing: .04em; color: var(--oxblood); line-height: 1.1;
}
.res-when span, .res-meta span { font-size: 12.5px; color: var(--muted); }
.res-meta b { font-weight: 400; font-size: 15px; }
.res-badge {
  margin-left: auto;
  font-family: var(--display); font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  padding: 5px 12px; border: 1px solid currentColor;
}
.res-badge.pending { color: #9C7526; }
.res-badge.confirmed { color: #5F7355; }
.res-badge.cancelled { color: var(--oxblood-2); opacity: .7; }
.muted { color: var(--muted); font-size: 15px; }

.chip-row { display: flex; gap: 10px; flex-wrap: wrap; }
.chip-row button {
  background: none; cursor: pointer; border: 1px solid var(--line);
  font-family: var(--display); font-size: 13px; font-weight: 500; letter-spacing: .01em;
  padding: 9px 16px; color: var(--muted);
  transition: background .35s var(--shoji), color .35s var(--ease), border-color .35s var(--ease);
}
.chip-row button.active { background: var(--oxblood); border-color: var(--oxblood); color: var(--paper); }

.toast {
  position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px);
  z-index: 260;
  background: var(--night); color: var(--paper);
  font-family: var(--display); font-size: 13.5px; font-weight: 500; letter-spacing: .01em;
  padding: 14px 24px;
  opacity: 0; pointer-events: none;
  transition: opacity .3s var(--ease), transform .4s var(--shoji);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* --------------------------------------------- the carte on a dark band -- */
/* The preview sits inside the night band, so every ink colour it inherits from
   the paper theme has to be answered here or the whole card reads as empty. */
.band-dark .menu-cat h3 { color: var(--paper); border-bottom-color: var(--line-cream); }
.band-dark .menu-cat-sub { color: rgba(247, 242, 233, .55); }
.band-dark .mi-name { color: var(--paper); }
.band-dark .mi-dots { border-bottom-color: var(--line-cream); }
.band-dark .mi-price { color: var(--sakura); }
.band-dark .mi-was { color: rgba(247, 242, 233, .5); }
.band-dark .mi-deal { color: #C3D3B4; }
.band-dark .menu-item-desc { color: rgba(247, 242, 233, .55); }
.band-dark .menu-tabs { border-color: var(--line-cream); }
.band-dark .menu-tabs button { color: rgba(247, 242, 233, .6); }
.band-dark .menu-tabs button.active { background: var(--sakura); color: var(--night); }

/* Bacchus carries a photograph rather than a flat fill, so it needs the dark
   theme spelled out and a heavier scrim under the headline. */
.bacchus .section-title { color: var(--paper); }
.bacchus .kicker { color: var(--sakura); }
.bacchus-bg::after {
  background:
    linear-gradient(to right, rgba(20, 5, 9, .96) 0%, rgba(20, 5, 9, .82) 38%, rgba(20, 5, 9, .3) 78%),
    linear-gradient(to top, rgba(20, 5, 9, .6), rgba(20, 5, 9, .2));
}