/* ==========================================================================
   CAPITOLINE — Rustic Italian, Asbury Park
   Design system: "Day // Night"
   Type: Fraunces (display) + Karla (text)
   Two full themes driven by html[data-theme="day" | "night"]
   ========================================================================== */

/* ---------- Tokens ---------- */

:root {
  --font-display: "Fraunces", "Georgia", serif;
  --font-text: "Karla", "Helvetica Neue", sans-serif;

  --fs-hero: clamp(2.75rem, 8.5vw, 7rem);
  --fs-h1: clamp(2.8rem, 7vw, 6.4rem);
  --fs-h2: clamp(2.3rem, 5.2vw, 4.4rem);
  --fs-h3: clamp(1.3rem, 2.2vw, 1.7rem);
  --fs-lead: clamp(1.05rem, 1.5vw, 1.25rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-label: 0.72rem;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur: 0.7s;

  --container: 74rem;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --radius: 14px;
  --arch: 999px 999px 14px 14px;
}

/* Day — sun-washed parchment, terracotta, olive. The doors are open. */
html[data-theme="day"] {
  --bg: #f2e7cd;
  --bg-elev: #f9f1dd;
  --bg-deep: #e7d5ac;
  --bg-footer: #291f15;
  --ink: #2b2015;
  --ink-2: #6b5945;
  --ink-inverse: #f4e9d6;
  --acc: #b64421;
  --acc-hover: #a03a18;
  --acc-2: #5c6836;
  --gold: #a4762f;
  --neon: #bc4a26;
  --line: rgba(43, 32, 21, 0.2);
  --line-strong: rgba(43, 32, 21, 0.38);
  --shadow: 0 24px 48px -20px rgba(94, 56, 22, 0.38), 0 2px 6px rgba(94, 56, 22, 0.09);
  --inner-light: inset 0 1px 0 rgba(255, 255, 255, 0.55);
  --scrim-hero:
    radial-gradient(95% 85% at 20% 92%, rgba(26, 15, 7, 0.58), transparent 62%),
    linear-gradient(180deg, rgba(38, 22, 10, 0.36) 0%, rgba(38, 22, 10, 0.16) 38%, rgba(26, 15, 7, 0.8) 100%);
  --grain-opacity: 0.05;
  --glow: none;
}

/* Night — doors closed, candles lit, the wolf goes neon. Warm espresso dark. */
html[data-theme="night"] {
  --bg: #16100b;
  --bg-elev: #201812;
  --bg-deep: #0d0805;
  --bg-footer: #0d0805;
  --ink: #f5ead5;
  --ink-2: #b8a88f;
  --ink-inverse: #f5ead5;
  --acc: #e9a24e;
  --acc-hover: #f4b569;
  --acc-2: #97a061;
  --gold: #e4b76a;
  --neon: #ee5fa5;
  --line: rgba(245, 234, 213, 0.13);
  --line-strong: rgba(245, 234, 213, 0.3);
  --shadow: 0 30px 70px -24px rgba(0, 0, 0, 0.8), 0 2px 8px rgba(0, 0, 0, 0.4);
  --inner-light: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --scrim-hero: linear-gradient(180deg, rgba(12,7,4,0.5) 0%, rgba(12,7,4,0.26) 45%, rgba(9,5,3,0.84) 100%);
  --grain-opacity: 0.07;
  --glow: 0 0 22px rgba(238, 95, 165, 0.4);
}

/* ---------- Reset / base ---------- */

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

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

body {
  margin: 0;
  font-family: var(--font-text);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  overflow-x: hidden;
}

html.theme-anim body,
html.theme-anim body *:not(video):not(img) {
  transition: background-color 0.7s var(--ease-in-out), color 0.7s var(--ease-in-out),
    border-color 0.7s var(--ease-in-out), box-shadow 0.7s var(--ease-in-out);
}

/* Film grain — layered atmosphere on every page */
body::after {
  content: "";
  position: fixed;
  inset: -8%; /* just enough overscan for the ±3% grain drift — keeps the GPU layer near viewport-size */
  z-index: 2000;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: var(--grain-opacity);
  animation: grain 9s steps(6) infinite;
}
@keyframes grain {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-3%, 2%); }
  40% { transform: translate(2%, -3%); }
  60% { transform: translate(-2%, -2%); }
  80% { transform: translate(3%, 3%); }
}

img, video { max-width: 100%; display: block; }
/* Every <img> carries its intrinsic width/height so the browser can reserve the
   box before the bytes arrive (see tools/img-dims.mjs). Those attributes are
   presentational hints that map to the CSS *height* property — so without this
   line, an image whose width is clamped by max-width keeps its full attribute
   height and stretches. This only reaches images no component rule has sized;
   any `.thing img { height: … }` still wins on specificity. */
img { height: auto; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 440;
  line-height: 1.02;
  margin: 0 0 0.5em;
  letter-spacing: -0.015em;
}

/* Editorial italic accent inside display headings — the Gucci Osteria move */
h1 em, h2 em, h3 em, .hero-sub em {
  font-style: italic;
  font-weight: 380;
  letter-spacing: 0;
}
h2 em { color: var(--acc); }

p { margin: 0 0 1em; }

::selection { background: var(--acc); color: var(--bg); }

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

.container { width: min(var(--container), 100% - var(--gutter) * 2); margin-inline: auto; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 3000;
  background: var(--acc); color: #fff; padding: 0.6rem 1rem;
}
.skip-link:focus { left: 0; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Shared text styles ---------- */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--acc);
  margin-bottom: 1.1rem;
}
.eyebrow::before {
  content: "";
  width: 2.2rem;
  height: 1px;
  background: currentColor;
  opacity: 0.7;
}

.lead { font-size: var(--fs-lead); color: var(--ink-2); max-width: 38em; }

.display-italic { font-style: italic; font-weight: 380; }

.numerals {
  font-family: var(--font-display);
  letter-spacing: 0.22em;
  color: var(--gold);
  font-size: var(--fs-small);
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  font-family: var(--font-text);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.95rem 1.7rem;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform 0.45s var(--ease-out), background-color 0.35s, color 0.35s,
    border-color 0.35s, box-shadow 0.45s var(--ease-out);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-solid {
  background: linear-gradient(180deg, color-mix(in srgb, var(--acc) 86%, #fff), var(--acc) 55%, color-mix(in srgb, var(--acc) 88%, #000));
  color: #fdf8ee;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 1px 3px rgba(30, 17, 8, 0.2);
}
.btn-solid:hover {
  background: linear-gradient(180deg, color-mix(in srgb, var(--acc-hover) 86%, #fff), var(--acc-hover));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 14px 30px -10px color-mix(in srgb, var(--acc) 60%, transparent);
}
html[data-theme="night"] .btn-solid { color: #201205; }

.btn-ghost { border-color: var(--line-strong); color: var(--ink); background: transparent; }
.btn-ghost:hover { border-color: var(--ink); }

.btn-light { background: var(--ink-inverse); color: #2b2118; }
.btn-light:hover { box-shadow: var(--shadow); }

.btn .arrow { transition: transform 0.45s var(--ease-out); }
.btn:hover .arrow { transform: translateX(4px); }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--acc);
  border-bottom: 1px solid transparent;
  transition: gap 0.4s var(--ease-out), border-color 0.3s;
}
.text-link:hover { gap: 0.8rem; border-color: var(--acc); }

/* ---------- Header / nav ---------- */

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  transition: transform 0.55s var(--ease-out), background-color 0.4s, box-shadow 0.4s,
    border-color 0.4s, backdrop-filter 0.4s;
  border-bottom: 1px solid transparent;
}
.site-header.scrolled {
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
  box-shadow: 0 14px 34px -26px rgba(20, 12, 6, 0.5);
}
/* Anchor targets clear the persistent header */
[id] { scroll-margin-top: 6rem; }

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.9rem var(--gutter);
  max-width: 100rem;
  margin-inline: auto;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-shrink: 0;
}
.brand img { height: 34px; width: auto; }
.brand-word {
  font-family: var(--font-display);
  font-size: 1.28rem;
  font-weight: 560;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

/* On transparent header over hero, force light text + a whisper of scrim so
   nav and Reserve stay legible over bright footage (conversion path first) */
.site-header:not(.scrolled).over-hero {
  color: #f5edda;
  background: linear-gradient(180deg, rgba(20, 12, 6, 0.42), rgba(20, 12, 6, 0.14) 70%, transparent);
}
.site-header:not(.scrolled).over-hero .btn-ghost { border-color: rgba(245, 237, 218, 0.5); color: #f5edda; }

.primary-nav { display: flex; align-items: center; gap: 1.9rem; }
.primary-nav a:not(.btn) {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  position: relative;
  padding: 0.3rem 0;
}
.primary-nav a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: 1.5px;
  background: var(--acc);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.45s var(--ease-out);
}
.primary-nav a:not(.btn):hover::after,
.primary-nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }

.header-actions { display: flex; align-items: center; gap: 0.8rem; }
.header-actions .btn { padding: 0.7rem 1.3rem; font-size: 0.74rem; }

/* Theme toggle — sun / discoball */
.theme-toggle {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: inherit;
  cursor: pointer;
  display: grid;
  place-items: center;
  position: relative;
  transition: border-color 0.3s, transform 0.5s var(--ease-out), box-shadow 0.5s;
  flex-shrink: 0;
}
.theme-toggle:hover { border-color: currentColor; transform: rotate(25deg); }
/* The toggle's night icon is the discoball — its light is white, like the real one */
html[data-theme="night"] .theme-toggle { box-shadow: 0 0 20px rgba(255, 255, 255, 0.28); border-color: rgba(245, 234, 213, 0.5); }
.theme-toggle svg { width: 20px; height: 20px; position: absolute; transition: opacity 0.4s, transform 0.6s var(--ease-out); }
.theme-toggle .icon-sun { opacity: 1; transform: scale(1) rotate(0); }
.theme-toggle .icon-disco { opacity: 0; transform: scale(0.4) rotate(-90deg); }
html[data-theme="night"] .theme-toggle .icon-sun { opacity: 0; transform: scale(0.4) rotate(90deg); }
html[data-theme="night"] .theme-toggle .icon-disco { opacity: 1; transform: scale(1) rotate(0); }

/* Hamburger */
.nav-burger {
  display: none;
  width: 44px; height: 44px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
  place-items: center;
}
.nav-burger span {
  display: block;
  width: 18px; height: 2px;
  background: currentColor;
  position: relative;
  transition: background 0.2s;
}
.nav-burger span::before, .nav-burger span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px; height: 2px;
  background: currentColor;
  transition: transform 0.4s var(--ease-out), top 0.4s var(--ease-out);
}
.nav-burger span::before { top: -6px; }
.nav-burger span::after { top: 6px; }
body.menu-open .nav-burger span { background: transparent; }
body.menu-open .nav-burger span::before { top: 0; transform: rotate(45deg); }
body.menu-open .nav-burger span::after { top: 0; transform: rotate(-45deg); }

/* Overlay menu — a room of its own: numbered index, hairlines, ghost type,
   and the reservation path anchored at the bottom. */
.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 990;
  background: var(--bg-deep);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: clamp(5.5rem, 10vh, 7rem) var(--gutter) clamp(1.6rem, 4vh, 3rem);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s var(--ease-out), visibility 0.5s;
  overflow-y: auto;
  overflow-x: hidden;
}
body.menu-open .menu-overlay { opacity: 1; visibility: visible; }
html[data-theme="night"] .menu-overlay {
  background:
    radial-gradient(80% 55% at 50% 0%, rgba(233, 162, 78, 0.08), transparent 60%),
    radial-gradient(60% 45% at 90% 100%, rgba(238, 95, 165, 0.06), transparent 60%),
    var(--bg-deep);
}
html[data-theme="day"] .menu-overlay {
  background:
    radial-gradient(85% 60% at 68% 0%, rgba(255, 196, 105, 0.32), transparent 60%),
    linear-gradient(180deg, #ecd8ab, #e3cd9d);
}

.menu-overlay .ghost-word {
  top: 4%;
  right: -5%;
  font-size: clamp(6.5rem, 28vw, 17rem);
  opacity: 0.75;
  transform: translateX(3rem);
  transition: transform 1.2s var(--ease-out), opacity 0.8s;
}
body.menu-open .menu-overlay .ghost-word { transform: none; }

.menu-overlay nav {
  display: flex;
  flex-direction: column;
  counter-reset: mlink;
  width: 100%;
  max-width: 44rem;
  margin-block: auto;
  position: relative;
  z-index: 1;
}
.menu-overlay nav a {
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 5.6vw, 2.6rem);
  font-weight: 430;
  line-height: 1.15;
  display: flex;
  align-items: baseline;
  gap: clamp(0.9rem, 3vw, 1.4rem);
  padding: clamp(0.5rem, 1.5vh, 0.9rem) 0;
  border-bottom: 1px solid var(--line);
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out),
    color 0.3s, padding-left 0.45s var(--ease-out);
}
.menu-overlay nav a::before {
  counter-increment: mlink;
  content: counter(mlink, decimal-leading-zero);
  font-family: var(--font-text);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--gold);
  min-width: 2.4ch;
  transform: translateY(-0.45em);
}
.menu-overlay nav a::after {
  content: "→";
  margin-left: auto;
  font-size: 0.55em;
  color: var(--acc);
  opacity: 0;
  transform: translateX(-12px);
  transition: opacity 0.35s, transform 0.45s var(--ease-out);
}
.menu-overlay nav a:hover { color: var(--acc); font-style: italic; padding-left: 0.5rem; }
.menu-overlay nav a:hover::after { opacity: 1; transform: none; }
body.menu-open .menu-overlay nav a { opacity: 1; transform: none; }

.menu-overlay .menu-secondary {
  margin-top: 1.7rem;
  width: 100%;
  max-width: 44rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 1.6rem;
  opacity: 0;
  transition: opacity 0.6s var(--ease-out) 0.4s;
  position: relative;
  z-index: 1;
}
body.menu-open .menu-overlay .menu-secondary { opacity: 1; }
.menu-overlay .menu-secondary a {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.menu-overlay .menu-secondary a:hover { color: var(--acc); }

.menu-overlay .menu-foot {
  margin-top: 1.6rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line-strong);
  width: 100%;
  max-width: 44rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.6rem;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s var(--ease-out) 0.5s, transform 0.6s var(--ease-out) 0.5s;
  position: relative;
  z-index: 1;
}
body.menu-open .menu-overlay .menu-foot { opacity: 1; transform: none; }
.menu-overlay .menu-foot address {
  font-style: normal;
  font-size: var(--fs-small);
  color: var(--ink-2);
  letter-spacing: 0.04em;
}
.menu-overlay .menu-foot address a:hover { color: var(--acc); }

/* ---------- Hero ---------- */

.hero {
  position: relative;
  height: 100svh;
  min-height: 620px;
  display: flex;
  align-items: flex-end;
  color: #f5edda;
  overflow: hidden;
}
/* Fade the bottom of the video out — pinned to the night bg in BOTH themes.
   Fading to day-cream poured light back over the footage's darkest band and
   washed the whole grade out; the marquee's border handles the handoff to
   the cream page below. */
.hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: clamp(5rem, 12vh, 9rem);
  background: linear-gradient(180deg, transparent, #16100b);
  z-index: 1;
  pointer-events: none;
}
.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  will-change: transform;
}
.hero-media video, .hero-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.06);
  transition: transform 2.4s var(--ease-out);
}
body.is-loaded .hero-media video, body.is-loaded .hero-media img { transform: scale(1); }
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--scrim-hero);
}
/* Homepage hero only: pinned to the night-theme scrim in BOTH themes — the
   client wants the day hero to look exactly like the old night grade (day's
   own scrim + wash read as washed out on this footage). Sub-page heroes
   (.page-hero) keep the per-theme scrim. */
.hero .hero-media::after {
  background: linear-gradient(180deg, rgba(12,7,4,0.5) 0%, rgba(12,7,4,0.26) 45%, rgba(9,5,3,0.84) 100%);
}
/* Night pulls a candlelight vignette over the footage (all heroes) */
html[data-theme="night"] .hero-media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(120% 90% at 50% 110%, rgba(233, 162, 78, 0.26), transparent 60%),
    rgba(22, 11, 6, 0.42);
  mix-blend-mode: multiply;
}
/* Sub-page heroes keep their sunny golden-hour wash by day */
html[data-theme="day"] .page-hero .hero-media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(110% 75% at 68% 0%, rgba(255, 196, 105, 0.45), transparent 58%),
    linear-gradient(200deg, rgba(255, 214, 140, 0.22), transparent 45%);
  mix-blend-mode: soft-light;
}
/* Homepage hero gets the night vignette by DAY too — the old day treatment
   (brightening golden wash) read as washed out on this footage; the client
   wants the old night grade as the day look. */
html[data-theme="day"] .hero .hero-media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  /* A touch deeper than night's 0.42 — the cream page around the hero makes
     the same grade read brighter by day, so day compensates. */
  background: radial-gradient(120% 90% at 50% 110%, rgba(233, 162, 78, 0.26), transparent 60%),
    rgba(22, 11, 6, 0.52);
  mix-blend-mode: multiply;
}

.hero-content {
  position: relative;
  z-index: 2;
  width: min(var(--container), 100% - var(--gutter) * 2);
  margin-inline: auto;
  padding-bottom: clamp(3.5rem, 9vh, 6.5rem);
  will-change: transform, opacity;
}
/* Localized frosted veil behind the copy — blurs and darkens whatever video
   pixels sit behind the text, on any frame, at any size. Soft-masked so it
   reads as depth-of-field, not a panel. Gradient alone is the fallback. */
.hero-content::before {
  content: "";
  position: absolute;
  z-index: -1;
  /* Bleed past the viewport horizontally so the filter region has no visible
     left/right boundary; the mask fades to zero before the top edge. */
  inset: -10rem calc(50% - 50vw - 2px) -2rem;
  background: radial-gradient(54% 68% at 30% 66%, rgba(22, 13, 6, 0.55), rgba(22, 13, 6, 0.3) 52%, transparent 88%);
  -webkit-backdrop-filter: blur(16px) brightness(0.82) saturate(1.08);
  backdrop-filter: blur(16px) brightness(0.82) saturate(1.08);
  -webkit-mask-image: radial-gradient(60% 62% at 30% 66%, #000 42%, transparent 96%);
  mask-image: radial-gradient(60% 62% at 30% 66%, #000 42%, transparent 96%);
  pointer-events: none;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  font-size: var(--fs-label);
  font-weight: 800;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  padding: 0.5rem 1.1rem 0.5rem 0.9rem;
  border: 1px solid rgba(245, 237, 218, 0.35);
  border-radius: 999px;
  background: rgba(20, 14, 10, 0.32);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.hero-eyebrow::before { content: ""; width: 2.4rem; height: 1px; background: currentColor; }

.hero-title {
  font-size: clamp(3.1rem, 11.4vw, 11rem);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0.28em 0 0.14em;
  line-height: 0.95;
  white-space: nowrap;
  text-shadow: 0 4px 54px rgba(12, 8, 5, 0.68), 0 2px 14px rgba(12, 8, 5, 0.42);
}
/* Letter-by-letter reveal (spans injected by JS on [data-letters]) */
.hero-title .ch {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.85em) rotate(5deg);
  transform-origin: bottom left;
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
  transition-delay: calc(0.35s + var(--i, 0) * 0.045s);
}
body.is-loaded .hero-title .ch { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .hero-title .ch { opacity: 1; transform: none; }
}

/* Live open-now chip */
.open-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  border: 1px solid rgba(245, 237, 218, 0.38);
  border-radius: 999px;
  padding: 0.42rem 1rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  background: rgba(20, 14, 10, 0.28);
}
.open-chip[hidden] { display: none; }
.open-chip .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #9ab06a;
  box-shadow: 0 0 0 0 rgba(154, 176, 106, 0.6);
  animation: chip-pulse 2.2s ease-out infinite;
}
.open-chip.closed .dot { background: #c98a5e; animation: none; }
@keyframes chip-pulse {
  0% { box-shadow: 0 0 0 0 rgba(154, 176, 106, 0.55); }
  70% { box-shadow: 0 0 0 9px rgba(154, 176, 106, 0); }
  100% { box-shadow: 0 0 0 0 rgba(154, 176, 106, 0); }
}

.hero-sub {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 380;
  font-size: clamp(1.15rem, 2.4vw, 1.7rem);
  opacity: 0.96;
  max-width: 26em;
  text-shadow: 0 1px 26px rgba(12, 8, 5, 0.65), 0 1px 8px rgba(12, 8, 5, 0.4);
}
.hero-eyebrow, .hero-meta {
  text-shadow: 0 1px 18px rgba(12, 8, 5, 0.6), 0 1px 5px rgba(12, 8, 5, 0.4);
}

.hero-ctas { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2rem; }
/* Hero CTAs carry the conversion weight — bigger, lifted off the footage */
.hero-ctas .btn { padding: 1.05rem 2.1rem; font-size: 0.88rem; }
.hero-ctas .btn-solid {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 18px 42px -12px rgba(16, 9, 4, 0.6);
}
.hero-ctas .btn-light {
  box-shadow: 0 14px 36px -14px rgba(16, 9, 4, 0.55);
}

.hero-meta {
  margin-top: 2.6rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem 2.2rem;
  font-size: var(--fs-small);
  letter-spacing: 0.08em;
  opacity: 0.85;
}

/* Page-load stagger */
.hero [data-stagger] {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
  transition-delay: calc(var(--d, 0) * 1s);
}
body.is-loaded .hero [data-stagger] { opacity: 1; transform: none; }

.scroll-cue {
  position: absolute;
  bottom: 2rem; right: var(--gutter);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.65rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  opacity: 0;
  transition: opacity 1s var(--ease-out) 1.8s;
}
body.is-loaded .scroll-cue { opacity: 0.8; }
.scroll-cue::after {
  content: "";
  width: 1px; height: 3.4rem;
  background: currentColor;
  animation: cue 2.2s var(--ease-in-out) infinite;
  transform-origin: top;
}
@keyframes cue { 0% { transform: scaleY(0); } 45% { transform: scaleY(1); } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* Sub-page hero (smaller) */
.page-hero {
  position: relative;
  min-height: 62svh;
  display: flex;
  align-items: flex-end;
  color: #f5edda;
  overflow: hidden;
}
/* Bottom-aligned by flex-end, so padding-top does nothing until the content column
   outgrows the hero — which it does on phones, where the title wraps to two lines and
   the CTAs stack. Without it the block overflows upward and the fixed header's rule
   and wordmark cut straight through "THE DINNER MENU". Not a width thing — it's content
   height vs viewport height, so it hit 1280x620 as well as phones. 6rem clears the 74px
   header with room to spare; it's inert wherever the content already fits (plan-a-party
   is unchanged) and grows menu.html's desktop hero by ~20px. */
.page-hero .hero-content {
  padding-top: 6rem;
  padding-bottom: clamp(2.5rem, 7vh, 4.5rem);
}
/* Menu page: the dynamic title ("THE DINNER MENU") runs longer than the
   homepage wordmark — size down and let it wrap on phones */
.page-hero .hero-title { font-size: clamp(2.5rem, 7.6vw, 7.4rem); white-space: normal; text-wrap: balance; }
/* Wolf-favorites note rides the CTA row so it isn't lost below the fold */
.hero-wolf-note {
  align-self: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  color: rgba(245, 237, 218, 0.92);
  text-shadow: 0 1px 18px rgba(12, 8, 5, 0.6), 0 1px 5px rgba(12, 8, 5, 0.4);
}
.hero-wolf-note .star { color: var(--neon); font-style: normal; }
/* "See our hours" — meta-row link down to the footer hours */
.hours-link {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: inherit;
  border-bottom: 1px solid rgba(245, 237, 218, 0.45);
  padding-bottom: 0.15em;
  transition: border-color 0.3s;
}
.hours-link:hover { border-bottom-color: currentColor; }
#hours { scroll-margin-top: 8rem; }
.page-hero .hero-media img { transform: scale(1.08); }
body.is-loaded .page-hero .hero-media img { transform: scale(1.01); }
.page-hero-plain {
  padding: clamp(9rem, 20vh, 12rem) 0 clamp(1.5rem, 3vh, 2.25rem);
}
/* Tighten the intro → form gap on the plain hero pages (contact, employment)
   without touching .section-tight elsewhere */
.page-hero-plain + .section-tight { padding-top: clamp(2rem, 4vw, 3rem); }

/* ---------- Marquee ---------- */

.marquee {
  border-block: 1px solid var(--line);
  overflow: hidden;
  padding: 0.95rem 0;
  background: var(--bg-elev);
}
.marquee-track {
  display: flex;
  gap: 3rem;
  width: max-content;
  animation: marquee 36s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track span {
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink-2);
}
.marquee-track span i { font-style: normal; color: var(--acc); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Sections ---------- */

.section { padding: clamp(4.5rem, 10vw, 8.5rem) 0; position: relative; }
.section-tight { padding: clamp(3rem, 7vw, 5.5rem) 0; }
.section-deep { background: var(--bg-deep); border-block: 1px solid var(--line); }
.section-elev { background: var(--bg-elev); border-block: 1px solid var(--line); }

/* Ambient light: candle pools at night, sun wash by day — sections aren't flat slabs */
html[data-theme="night"] .section-deep {
  background: radial-gradient(90% 55% at 50% 0%, rgba(233, 162, 78, 0.055), transparent 62%), var(--bg-deep);
}
html[data-theme="night"] .section-elev {
  background: radial-gradient(70% 55% at 85% 0%, rgba(238, 95, 165, 0.04), transparent 60%),
    radial-gradient(60% 45% at 10% 100%, rgba(233, 162, 78, 0.045), transparent 60%), var(--bg-elev);
}
html[data-theme="night"] .site-footer {
  background: radial-gradient(70% 40% at 50% 0%, rgba(228, 183, 106, 0.05), transparent 65%), var(--bg-footer);
}
/* Day sections get sunlight the way night sections get candlelight:
   long golden pools, sun-baked plaster contrast between bands. */
html[data-theme="day"] .section-deep {
  background:
    radial-gradient(85% 60% at 72% 0%, rgba(255, 184, 86, 0.26), transparent 60%),
    radial-gradient(60% 45% at 8% 100%, rgba(198, 141, 60, 0.14), transparent 60%),
    linear-gradient(180deg, #ecd8ab, #e3cd9d);
}
html[data-theme="day"] .section-elev {
  background:
    radial-gradient(90% 65% at 28% 0%, rgba(255, 203, 112, 0.4), transparent 62%),
    linear-gradient(180deg, #f7edd2, #f1e3bd);
}

.section-head { max-width: 46em; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-head h2 { font-size: var(--fs-h2); }
.section-head.centered { margin-inline: auto; text-align: center; }
.section-head.centered .eyebrow { justify-content: center; }
.section-head.centered .eyebrow::before { display: none; }
.section-head.centered .lead { margin-inline: auto; }

/* Scroll reveals */
[data-reveal] {
  opacity: 0;
  transform: translateY(30px);
}
[data-reveal].in {
  opacity: 1;
  transform: none;
}
/* The entrance transition (and its stagger delay) only applies while revealing.
   Once done, .did-reveal hands transitions back to each component's own rules —
   otherwise every hover on a revealed card inherits the stagger delay. */
[data-reveal].in:not(.did-reveal) {
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
  transition-delay: calc(var(--d, 0) * 1s);
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; }
}

/* ---------- Intro / about ---------- */

.intro-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: center;
}
.intro-figure { position: relative; }

/* The main shot as a matted print — straight edges, a caption strip in the
   matte, and the address chop beneath it. No arch, no spin. */
.intro-print {
  position: relative;
  z-index: 1;
  margin: 0;
  background: var(--bg-elev);
  padding: clamp(0.55rem, 1.1vw, 0.8rem);
  padding-bottom: 0;
  outline: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.intro-print-media { overflow: hidden; }
.intro-print-media img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}
.intro-print-caption {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.75rem 0.35rem 0.85rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--ink-2);
}
.intro-print-caption .numerals {
  font-style: normal;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  color: var(--gold);
}

/* A static ink stamp where the spinning badge used to live — straddles the
   print's bottom-right corner like a chop on a photograph */
.intro-stamp {
  position: absolute;
  z-index: 2;
  right: -1.1rem;
  bottom: 3.2rem;
  transform: rotate(6deg);
  border: 2px solid var(--acc);
  color: var(--acc);
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  line-height: 1.75;
  text-align: center;
  padding: 0.65rem 0.95rem 0.6rem 1.15rem;
  opacity: 0.92;
}
.intro-stamp i {
  display: block;
  font-style: italic;
  font-weight: 440;
  text-transform: none;
  letter-spacing: 0.1em;
  margin-top: 0.15rem;
}

/* The headline runs at h1 scale — type is the section's first image. The
   second line steps in: an editorial staircase. */
.intro-headline { font-size: clamp(2.1rem, 4.1vw, 3.7rem); line-height: 1.06; }
.intro-headline .ln + .ln { padding-left: 0.85em; }

.relic-label {
  font-family: var(--font-text);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 0.5rem;
}

/* Le Due Vite — the day//night thesis as twin plaques split by the house
   slash. Terse on purpose: the turn, the feel, the hours. */
.due-vite { margin-top: 2.6rem; }
.due-vite .relic-label { margin-bottom: 0.9rem; }
.dv-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1.2rem clamp(1rem, 2vw, 1.8rem);
}
/* Cells stretch to equal height; hours pin to the base so the pair reads level */
.dv-cell {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line);
  padding-top: 0.9rem;
}
.dv-cell p { margin: 0; }
.dv-slash {
  align-self: center;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 460;
  font-size: clamp(2rem, 3.2vw, 2.8rem);
  line-height: 1;
  color: var(--acc);
  opacity: 0.85;
}
.vita-tag {
  font-family: var(--font-text);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}
.vita-tag-day { color: var(--acc); }
.vita-tag-night { color: var(--neon); text-shadow: 0 0 14px rgba(238, 95, 165, 0.3); }
.dv-cell .dv-line {
  margin-top: 0.5rem;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 460;
  font-size: clamp(1.25rem, 1.7vw, 1.5rem);
  line-height: 1.2;
  color: var(--ink);
}
.dv-cell .dv-copy {
  margin-top: 0.4rem;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--ink-2);
}
.dv-cell .dv-hours {
  margin-top: auto;
  padding-top: 0.85rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.98rem;
  color: var(--gold);
}

/* The conversion moment — Reserve re-offered right after the pitch */
.intro-ctas {
  margin-top: 2.6rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

/* The collage — one room photographed through one day, three prints
   descending the light axis: noon / dusk / late. Deliberate-collage cues
   (clear mats, size steps, near-flat alternating tilts). Tilts live on the
   prints, not the figure — [data-reveal] owns the figure's transform. */
.intro-collage { display: grid; }
/* Size follows appetite, not just chronology: noon establishes the room but
   cedes area to the two night shots that actually sell dinner. */
.print-noon {
  width: 76%;
  justify-self: start;
  transform: rotate(-1.2deg);
  z-index: 1;
}
.print-noon .intro-print-media img { aspect-ratio: 3 / 2; }
.print-dusk {
  width: 48%;
  justify-self: end;
  /* Overlap rule for the whole collage: a print may cover a neighbor's
     PHOTO, never its caption. Dusk rides the noon print's photo corner;
     noon's caption reads from the left and stays whole. */
  margin-top: -14%;
  transform: rotate(1.6deg);
  z-index: 2;
}
.print-dusk .intro-print-media img { aspect-ratio: 4 / 5; }
/* The living print — the bar on a Friday, sharp in a mat and moving.
   Same footage the quote band blurs into atmosphere; here it's a photograph
   that happens to be alive. data-inview starts/stops it with the viewport.
   It rises into the gap LEFT of the dusk print — interlocked, zero burials.
   Taller crop + exposure lift: dark footage needs presence at print size. */
.print-live {
  width: 50%;
  justify-self: start;
  margin-top: -30%;
  transform: rotate(-0.9deg);
  z-index: 3;
}
.print-live .intro-print-media video {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  filter: saturate(0.95) brightness(1.16);
}
/* The chop moves to the noon print's top-right corner — off every caption,
   filling the collage's empty upper-right */
.intro-collage .intro-stamp {
  top: -1.2rem;
  right: 12%;
  bottom: auto;
}
/* Time chips lead the captions — the collage reads as a timeline */
.intro-print-caption .cap-t {
  font-family: var(--font-text);
  font-style: normal;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold);
  margin-right: 0.15rem;
}
/* A quiet pulse on the living print's caption — an invitation to notice
   the motion, not an alarm */
.cine-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
  align-self: center;
  flex: none;
  animation: cine-pulse 2.6s ease-in-out infinite;
}
@keyframes cine-pulse {
  0%, 100% { opacity: 0.25; transform: scale(0.85); }
  50% { opacity: 0.9; transform: scale(1.1); }
}
@media (prefers-reduced-motion: reduce) {
  .cine-dot { animation: none; opacity: 0.6; }
}

/* La Mappa as a full-width foundation row under the spread */
.relic-strip { margin-top: clamp(3rem, 6vw, 4.5rem); }
.relic-strip ol {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 clamp(1.6rem, 3.2vw, 3rem);
}
.relic-strip li:last-child { border-bottom: 0; }
.relic-strip .relic-note { margin-top: 1.4rem; }
.relic-strip .relic-note .text-link { margin-left: 0.35rem; }

/* ---------- Menu highlights ---------- */

/* Dish index — photography fills the frame, the caption reads below it like a
   plate entry in an editorial catalogue. The whole card links to the menu. */
.dish-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.8rem, 3vw, 2.8rem) clamp(1rem, 1.8vw, 1.8rem);
  counter-reset: dish;
}
.dish-card { display: block; }
.dish-media {
  display: block;
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 3 / 3.7;
  box-shadow: var(--shadow);
}
.dish-media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(16, 10, 6, 0.1), transparent 28%, transparent 74%, rgba(16, 10, 6, 0.18));
  pointer-events: none;
}
.dish-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-out);
}
.dish-card:hover .dish-media img { transform: scale(1.05); }
.dish-caption { display: block; padding: 1rem 0.15rem 0; }
.dish-caption::before {
  counter-increment: dish;
  content: counter(dish, upper-roman);
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  color: var(--gold);
  margin-bottom: 0.3rem;
}
.dish-caption b {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 440;
  font-size: clamp(1.2rem, 1.5vw, 1.55rem);
  line-height: 1.12;
  letter-spacing: 0.01em;
  color: var(--ink);
  transition: color 0.3s;
}
.dish-card:hover .dish-caption b { color: var(--acc); }
/* Supplier credit (Semolina by the vodka-sauce pasta): a tinted silhouette,
   no box — masks the logo and fills it with the theme's muted ink so it
   blends into the caption in both day and night. */
.dish-credit {
  display: inline-block;
  height: 1.7em;
  aspect-ratio: 214 / 220;
  vertical-align: middle;
  margin-left: 0.5rem;
  background-color: var(--ink-2);
  -webkit-mask: url("../assets/semolina-mark.webp") center / contain no-repeat;
          mask: url("../assets/semolina-mark.webp") center / contain no-repeat;
}
/* Purveyor credit line under a section title (pasta by Semolina) */
.menu-credit {
  text-align: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-small);
  color: var(--ink-2);
  letter-spacing: 0.01em;
  margin: 0 0 1.3rem;
}
.menu-credit em { color: var(--acc); font-style: italic; }
.dish-caption > span {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.88rem;
  color: var(--ink-2);
  letter-spacing: 0.03em;
}
.dish-caption .go {
  display: inline-block;
  margin-top: 0.6rem;
  font-family: var(--font-text);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--acc);
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.35s, transform 0.45s var(--ease-out);
}
.dish-card:hover .dish-caption .go { opacity: 1; transform: none; }

.menu-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin-top: clamp(3.4rem, 6vw, 4.6rem);
}

/* ---------- Film bands: the oven + zero-proof ----------
   Both clips are portrait phone footage — so instead of shrinking them
   into framed cameos, each one runs the full height of its section as a
   structural column bleeding to the viewport edge. Copy sits beside it.
   The oven leads with the film on the left; zero-proof mirrors it. */

.film-band { position: relative; }
.film-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 46%) 1fr;
  align-items: center;
}
.film-band.flip .film-grid { grid-template-columns: 1fr minmax(0, 46%); }
.film-media {
  margin: 0;
  position: relative;
  height: min(82svh, 46rem);
  overflow: hidden;
}
.film-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
  display: block;
}
.film-copy {
  max-width: 46rem;
  padding: clamp(3.5rem, 7vw, 5.5rem) clamp(1.4rem, 6vw, 7rem);
}

/* Film-band furniture — the detail layer that keeps the copy column from
   floating alone in an empty field. Ledger = menu-row language at band
   scale; strip = matted proof prints. */
.film-ledger {
  list-style: none;
  margin: 1.8rem 0 0;
  padding: 0;
  max-width: 32rem;
}
.film-ledger li {
  display: flex;
  flex-direction: column;
  gap: 0.42rem;
  padding: 0.9rem 0;
  border-top: 1px solid var(--line);
}
.film-ledger li:last-child { border-bottom: 1px solid var(--line); }
.film-ledger .fl-name {
  font-family: var(--font-display);
  font-weight: 520;
  font-size: 1.1rem;
  letter-spacing: 0.01em;
}
.film-ledger .fl-name em {
  font-style: italic;
  font-weight: 380;
  font-size: 0.85em;
  color: var(--ink-2);
  margin-left: 0.45em;
}
.film-ledger .fl-pick::after {
  content: "✶";
  color: var(--neon);
  margin-left: 0.5rem;
  font-size: 0.85em;
}
.film-ledger .fl-desc {
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 30rem;
}
.film-ctas {
  margin: 1.9rem 0 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem 1.6rem;
}
.film-ctas .video-unmute { margin-top: 0; }
@media (max-width: 64rem) {
  .film-grid, .film-band.flip .film-grid { grid-template-columns: 1fr; }
  .film-media { order: -1; height: min(72svh, 34rem); }
  /* Oven leads with copy on mobile: the quote band above ends in footage,
     so text buffers the two videos instead of stacking film on film. */
  .oven-band .film-media { order: 1; }
  .film-copy {
    max-width: none;
    padding: clamp(2.6rem, 8vw, 4rem) var(--gutter) clamp(3.4rem, 9vw, 5rem);
  }
}
.video-unmute {
  margin-top: 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--fs-small);
  color: var(--ink-2);
  background: none;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 0.45rem 1rem;
  cursor: pointer;
  font-family: var(--font-text);
}
.video-unmute:hover { color: var(--ink); border-color: var(--ink); }

.checklist { list-style: none; padding: 0; margin: 1.4rem 0 0; }
.checklist li {
  padding: 0.65rem 0 0.65rem 1.9rem;
  position: relative;
  border-bottom: 1px solid var(--line);
  color: var(--ink-2);
}
.checklist li::before {
  content: "";
  position: absolute;
  left: 0; top: 1.18rem;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--acc);
}

/* ---------- Party teaser — the invitation ----------
   Dark photographic ground in BOTH themes, so legibility colors are fixed
   (cream + night-gold), not tokens. Scrim is two layers: a radial pool
   behind the headline block, a linear base behind the ways strip. */

.party-teaser {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  min-height: min(88svh, 46rem);
  display: flex;
  color: #f5edda;
  box-shadow: var(--shadow);
}
.party-teaser img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 8s var(--ease-out);
}
.party-teaser.in img { transform: scale(1.07); }
/* The night shot is portrait — anchor the crop to the top so the neon wolf
   ("your party, under the wolf") actually stays in frame */
html[data-theme="night"] .party-teaser img { object-position: 50% 10%; }
.party-teaser::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(85% 95% at 16% 32%, rgba(12, 7, 4, 0.72), transparent 62%),
    linear-gradient(180deg, rgba(12, 7, 4, 0.34) 0%, rgba(12, 7, 4, 0.16) 40%, rgba(9, 5, 3, 0.9) 100%);
}
/* The day shot is sun-flooded — pull the veil harder so cream type always clears it */
html[data-theme="day"] .party-teaser::after {
  background:
    radial-gradient(85% 95% at 16% 32%, rgba(24, 13, 5, 0.78), transparent 64%),
    linear-gradient(180deg, rgba(24, 13, 5, 0.44) 0%, rgba(24, 13, 5, 0.26) 40%, rgba(15, 8, 4, 0.93) 100%);
}
.party-teaser-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: clamp(1.5rem, 4vw, 4rem);
  width: 100%;
}
.party-teaser-content {
  padding: clamp(2rem, 5vw, 4rem);
  padding-right: 0;
  align-self: center;
  max-width: 58em;
  text-shadow: 0 1px 22px rgba(10, 6, 3, 0.45);
}
.party-teaser-content h2 {
  font-size: clamp(2.6rem, 5.6vw, 5.2rem);
  margin-bottom: 0.32em;
}
/* Fixed night-gold on the permanent dark ground — day's --gold is too dark here */
.party-teaser .eyebrow,
.party-teaser .eyebrow .no { color: #e4b76a; }
/* At narrow widths the eyebrow lands on the neon wolf — a tight dark halo
   (invisible over dark ground) keeps it legible on the bright spots */
.party-teaser .eyebrow {
  text-shadow: 0 1px 2px rgba(10, 6, 3, 0.9), 0 0 14px rgba(10, 6, 3, 0.8);
}
.party-lead {
  font-size: var(--fs-lead);
  max-width: 34em;
  color: rgba(245, 237, 218, 0.92);
}
.party-ctas {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem 1.6rem;
  margin-top: 1.7rem;
}
.party-phone {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  padding-bottom: 2px;
  border-bottom: 1px solid rgba(245, 237, 218, 0.45);
  transition: border-color 0.35s var(--ease-out), color 0.35s var(--ease-out);
}
.party-phone:hover { color: #fff; border-color: #e4b76a; }

/* The four ways — a ruled rail down the card's right edge, No. I–IV
   rhyming with the offer cards on plan-a-party.html */
.party-ways {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: 1fr;
  width: clamp(17rem, 30%, 23rem);
  flex-shrink: 0;
  border-left: 1px solid rgba(245, 237, 218, 0.28);
  background: rgba(9, 5, 3, 0.5);
}
.party-ways li + li { border-top: 1px solid rgba(245, 237, 218, 0.28); }
.party-ways a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  padding: 1.1rem clamp(1.4rem, 2.5vw, 2rem);
  transition: background-color 0.45s var(--ease-out);
}
.party-ways a:hover,
.party-ways a:focus-visible { background: rgba(245, 237, 218, 0.09); }
.way-no {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  color: #e4b76a;
  margin-bottom: 0.55rem;
}
.way-no::after {
  content: "→";
  font-style: normal;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out);
}
.party-ways a:hover .way-no::after,
.party-ways a:focus-visible .way-no::after { opacity: 1; transform: none; }
.party-ways b {
  display: block;
  font-family: var(--font-display);
  font-weight: 460;
  font-size: clamp(1.15rem, 1.6vw, 1.45rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin-bottom: 0.4rem;
}
.party-ways a > span:last-child {
  display: block;
  font-size: var(--fs-small);
  line-height: 1.5;
  color: rgba(245, 237, 218, 0.75);
}

/* Tablet: the rail drops below the copy as a 2×2 grid */
@media (max-width: 960px) {
  .party-teaser-inner { flex-direction: column; gap: clamp(2rem, 6vw, 3rem); }
  .party-teaser-content {
    padding: clamp(2rem, 5vw, 4rem) clamp(2rem, 5vw, 4rem) 0;
    align-self: stretch;
  }
  .party-ways {
    width: 100%;
    grid-template-columns: repeat(2, 1fr);
    border-left: 0;
    border-top: 1px solid rgba(245, 237, 218, 0.28);
  }
  .party-ways li + li { border-top: 0; }
  .party-ways li:nth-child(even) { border-left: 1px solid rgba(245, 237, 218, 0.28); }
  .party-ways li:nth-child(n+3) { border-top: 1px solid rgba(245, 237, 218, 0.28); }
}

@media (max-width: 740px) {
  .party-teaser { min-height: 0; }
  .party-teaser-content { padding: 1.8rem 1.4rem 0; }
  .party-ways { grid-template-columns: 1fr; }
  .party-ways li:nth-child(even) { border-left: 0; }
  .party-ways li + li { border-top: 1px solid rgba(245, 237, 218, 0.28); }
  .party-ways a { padding: 1.05rem 1.4rem 1.2rem; }
}

/* ---------- Cappy Hour ---------- */

.cappy {
  background: linear-gradient(135deg, #c2512b, #a23a16 78%);
  color: #fdf6e9;
  overflow: hidden;
  position: relative;
}
html[data-theme="night"] .cappy {
  background: radial-gradient(85% 120% at 15% 0%, rgba(238, 95, 165, 0.14), transparent 55%),
    linear-gradient(135deg, #4a1630, #260b1a 80%);
  color: #f6dfc8;
}
.cappy-inner {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
  padding: clamp(4rem, 8vw, 6.5rem) 0;
}
.cappy-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(3rem, 7.5vw, 6rem);
  line-height: 0.95;
  /* The italic descenders need real clearance before the copy starts */
  margin: 0 0 clamp(1.4rem, 2.6vw, 2.2rem);
  transform: rotate(-2.5deg);
  transform-origin: left bottom;
}
.cappy-title small {
  display: block;
  font-style: normal;
  font-family: var(--font-text);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  margin-bottom: 0.8rem;
  transform: rotate(0);
}
.cappy p { max-width: 34em; opacity: 0.92; }
.cappy .btn { margin-top: 0.6rem; }
.cappy::before, .cappy::after {
  content: "✶";
  position: absolute;
  font-size: clamp(6rem, 12vw, 11rem);
  opacity: 0.1;
  font-family: var(--font-display);
  line-height: 1;
}
.cappy::before { top: 1.6rem; right: 5%; transform: rotate(15deg); }
.cappy::after { bottom: -2.2rem; left: 3%; transform: rotate(-10deg); }

/* Plan a Party's closing band: no supporting copy, so the headline runs as one
   line and the button comes in right where it ends — one continuous gesture
   instead of a headline and a stranded action. Scoped to .cappy-cta — the
   Cappy Hour section on index.html shares .cappy/.cappy-inner/.cappy-title. */
.cappy-cta .cappy-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: clamp(1.5rem, 3.5vw, 3rem);
}
.cappy-cta .cappy-title {
  margin-bottom: 0;
  /* The stacked headline's tilt lifted its right end ~36px clear of the
     button's baseline once the copy became a single long line */
  transform: none;
}
.cappy-cta-action { display: flex; }
.cappy-cta .cappy-cta-action .btn { margin-top: 0; }

/* The week's board — dish names on the line, the pitch beneath, chalk rules
   between. Same dot-leader DNA as the menu page, kept loose. */
.cappy-board {
  list-style: none;
  margin: clamp(1.4rem, 2.4vw, 2rem) 0 0;
  padding: 0;
  max-width: 32em;
}
.cappy-board li {
  padding: 0.85rem 0;
  border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent);
}
.cappy-board li:last-child {
  border-bottom: 1px solid color-mix(in srgb, currentColor 22%, transparent);
}
.cappy-board b {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  letter-spacing: 0.01em;
}
.cappy-board b .star {
  font-style: normal;
  font-size: 0.7em;
  vertical-align: 0.2em;
  margin-left: 0.15em;
}
.cappy-board li > span {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.98rem;
  opacity: 0.82;
  max-width: 34em;
}

/* ---------- Gift cards / signup bands ---------- */

.gift-band { text-align: center; }
.gift-band .gift-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin-top: 2rem;
}

.signup-band {
  border-block: 1px solid var(--line);
  background: var(--bg-elev);
}
.signup-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem 1.6rem;
  padding: clamp(1.8rem, 4vw, 2.8rem) 0;
}
.signup-inner h3 { font-size: var(--fs-h3); margin: 0; max-width: 24em; }
.signup-inner p { margin: 0.35rem 0 0; color: var(--ink-2); }

/* ---------- Happenings calendar ---------- */

.calendar-shell { max-width: 58rem; margin-inline: auto; }
.calendar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.6rem;
}
.calendar-head h3 {
  font-size: var(--fs-h3);
  margin: 0;
  font-style: italic;
  font-weight: 420;
}
.calendar-nav { display: flex; gap: 0.5rem; }
.calendar-nav button {
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: inherit;
  font-size: 1rem;
  cursor: pointer;
  transition: border-color 0.3s, transform 0.3s var(--ease-out);
}
.calendar-nav button:hover { border-color: var(--ink); transform: translateY(-2px); }

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.calendar-grid .dow {
  text-align: center;
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-2);
  padding: 0.6rem 0;
}
.calendar-cell {
  min-height: clamp(3.4rem, 9vw, 6rem);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.45rem 0.55rem;
  font-size: var(--fs-small);
  background: var(--bg-elev);
  position: relative;
  transition: border-color 0.3s;
}
.calendar-cell.empty { background: transparent; border-style: dashed; opacity: 0.4; }
.calendar-cell.today { border-color: var(--acc); box-shadow: inset 0 0 0 1px var(--acc); }
.calendar-cell .evt {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.72rem;
  line-height: 1.3;
  background: var(--acc);
  color: #fdf6e9;
  border-radius: 5px;
  padding: 0.2rem 0.4rem;
}
html[data-theme="night"] .calendar-cell .evt { color: #1a1207; }
.calendar-empty-note {
  text-align: center;
  color: var(--ink-2);
  font-style: italic;
  font-family: var(--font-display);
  font-size: 1.1rem;
  margin-top: 2rem;
}

/* ---------- Party page ---------- */

.offer-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.2rem, 2.5vw, 2rem);
}
.offer-card {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--inner-light), 0 8px 24px -16px rgba(30, 18, 8, 0.2);
  transition: transform 0.6s var(--ease-out), box-shadow 0.6s var(--ease-out), border-color 0.4s;
}
.offer-card:hover { transform: translateY(-6px); box-shadow: var(--inner-light), var(--shadow); border-color: var(--line-strong); }
.offer-card .offer-media { aspect-ratio: 4 / 3; overflow: hidden; position: relative; }
.offer-card .offer-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.offer-card:hover .offer-media img { transform: scale(1.06); }
.offer-card .offer-num {
  position: absolute;
  z-index: 1;
  top: 0.9rem; left: 0.9rem;
  background: rgba(18, 12, 8, 0.6);
  color: #f5edda;
  font-family: var(--font-display);
  letter-spacing: 0.18em;
  font-size: 0.8rem;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.offer-card .offer-body { padding: 1.5rem 1.5rem 1.7rem; display: flex; flex-direction: column; gap: 0.4rem; flex: 1; }
.offer-card h3 { font-size: 1.35rem; margin: 0; }
.offer-card p { color: var(--ink-2); font-size: 0.95rem; margin: 0; flex: 1; }
.offer-card .offer-tag {
  align-self: flex-start;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--acc);
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 0.25rem 0.7rem;
  margin-bottom: 0.5rem;
}

/* ---------- Forms ---------- */

.form-shell {
  max-width: 44rem;
  margin-inline: auto;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.8rem, 4vw, 3rem);
  box-shadow: var(--inner-light), var(--shadow);
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.3rem; }
.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field.full { grid-column: 1 / -1; }
.field label {
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.field label .req { color: var(--acc); }
.field input, .field select, .field textarea {
  font-family: var(--font-text);
  font-size: 1rem;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  padding: 0.85rem 1rem;
  transition: border-color 0.3s, box-shadow 0.3s;
  width: 100%;
}
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 1.3rem) 55%, calc(100% - 1rem) 55%; background-size: 5px 5px; background-repeat: no-repeat; }
.field textarea { min-height: 8.5rem; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--acc);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc) 22%, transparent);
}
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: #b3362a; }
.field .error-msg {
  display: none;
  font-size: 0.8rem;
  color: #b3362a;
  font-weight: 700;
}
html[data-theme="night"] .field .error-msg { color: #ef8b7f; }
html[data-theme="night"] .field.invalid input, html[data-theme="night"] .field.invalid select, html[data-theme="night"] .field.invalid textarea { border-color: #ef8b7f; }
.field.invalid .error-msg { display: block; }

.form-actions { margin-top: 1.8rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.2rem; }
.form-note { font-size: var(--fs-small); color: var(--ink-2); margin: 0; }

/* Conditional budget field — expands from zero height when the event type
   calls for it (full buyout / semi-private). grid-rows 0fr→1fr gives a clean
   auto-height reveal; margin animates so the closed state leaves no gap. */
.budget-reveal {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  margin-top: 0;
  overflow: hidden;
  transition: grid-template-rows 0.45s var(--ease-out), opacity 0.35s ease, margin-top 0.45s var(--ease-out);
}
.budget-reveal.is-open {
  grid-template-rows: 1fr;
  opacity: 1;
  margin-top: 1.3rem;
}
.budget-reveal .budget-reveal-inner { min-height: 0; overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .budget-reveal { transition: opacity 0.2s ease; }
}

.form-status {
  display: none;
  margin-top: 1.4rem;
  border-radius: 9px;
  padding: 1rem 1.2rem;
  font-size: 0.95rem;
  border: 1px solid;
}
.form-status.show { display: block; }
.form-status.ok { border-color: var(--acc-2); background: color-mix(in srgb, var(--acc-2) 12%, transparent); }
/* a failed send must not look like a successful one */
.form-status.bad { border-color: #b3362a; background: color-mix(in srgb, #b3362a 9%, transparent); }
html[data-theme="night"] .form-status.bad { border-color: #ef8b7f; background: color-mix(in srgb, #ef8b7f 12%, transparent); }

/* ---------- Contact page ---------- */

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.info-card {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.6rem, 3vw, 2.4rem);
  box-shadow: var(--inner-light), 0 10px 30px -18px rgba(30, 18, 8, 0.25);
}
.info-card + .info-card { margin-top: 1.4rem; }
.info-card h2 { font-size: 1.2rem; }
.hours-table { width: 100%; border-collapse: collapse; }
.hours-table td { padding: 0.55rem 0; border-bottom: 1px solid var(--line); font-size: 0.95rem; }
.hours-table td:last-child { text-align: right; color: var(--ink-2); }
.hours-table tr.closed td:last-child { font-style: italic; }
.map-embed {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  aspect-ratio: 16 / 10;
  filter: saturate(0.85) contrast(1.02);
}
html[data-theme="night"] .map-embed { filter: invert(0.9) hue-rotate(180deg) saturate(0.5) brightness(0.9); }
.map-embed iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ---------- Menu page ---------- */

.menu-intro-note {
  text-align: center;
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink-2);
  max-width: 34em;
  margin: 0 auto 3rem;
}
.menu-section { max-width: 52rem; margin-inline: auto; margin-bottom: clamp(3rem, 6vw, 4.5rem); }
.menu-section-title {
  text-align: center;
  font-size: var(--fs-h2);
  position: relative;
  margin-bottom: 0.4em;
}
.menu-section-sub {
  text-align: center;
  font-size: var(--fs-small);
  color: var(--ink-2);
  font-style: italic;
  margin-bottom: 2.4rem;
}
.menu-list { list-style: none; margin: 0; padding: 0; }
.menu-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.3rem 1.6rem;
  padding: 1.05rem 0;
  border-bottom: 1px solid var(--line);
}
.menu-item:last-child { border-bottom: 0; }
.menu-item .name {
  font-family: var(--font-display);
  font-weight: 520;
  font-size: 1.14rem;
  letter-spacing: 0.01em;
}
.menu-item .price {
  font-family: var(--font-display);
  color: var(--acc);
  font-size: 1.05rem;
  white-space: nowrap;
}
.menu-item .desc { grid-column: 1 / -1; color: var(--ink-2); font-size: 0.94rem; }
.menu-item.wolf-pick .name::after {
  content: "✶";
  color: var(--neon);
  margin-left: 0.5rem;
  font-size: 0.85em;
}
.menu-addons {
  margin-top: 1.2rem;
  font-size: var(--fs-small);
  color: var(--ink-2);
  border: 1px dashed var(--line-strong);
  border-radius: 9px;
  padding: 0.9rem 1.2rem;
  font-style: italic;
}
.menu-divider {
  text-align: center;
  margin: clamp(3rem, 6vw, 4.5rem) auto;
  color: var(--gold);
  font-size: 1.3rem;
  letter-spacing: 1.4em;
}
.menu-photo-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin: clamp(3rem, 6vw, 4.5rem) 0;
}
.menu-photo-strip img {
  border-radius: var(--radius);
  aspect-ratio: 4 / 3;
  object-fit: cover;
  width: 100%;
}
.menu-photo-strip img:nth-child(2) { transform: translateY(1.4rem); }

/* ---------- Footer ---------- */

.site-footer {
  background: var(--bg-footer);
  color: #ece0cb;
  padding: 0 0 2.2rem;
  position: relative;
  overflow: hidden;
  border-top: 1px solid color-mix(in srgb, var(--gold) 35%, transparent);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(236, 224, 203, 0.16);
}
.footer-brand .brand-word { font-size: 1.5rem; }
.footer-brand p { color: rgba(236, 224, 203, 0.68); font-size: 0.95rem; max-width: 24em; margin-top: 1rem; }
.footer-col h2 {
  font-family: var(--font-text);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(236, 224, 203, 0.55);
  margin-bottom: 1.1rem;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; }
.footer-col a { color: rgba(236, 224, 203, 0.85); font-size: 0.95rem; transition: color 0.3s, padding-left 0.3s var(--ease-out); }
.footer-col a:hover { color: var(--gold); padding-left: 4px; }
.footer-col address { font-style: normal; color: rgba(236, 224, 203, 0.85); font-size: 0.95rem; line-height: 1.8; }

.social-row { display: flex; gap: 0.7rem; margin-top: 1.4rem; }
.social-row a {
  width: 42px; height: 42px;
  border: 1px solid rgba(236, 224, 203, 0.3);
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: border-color 0.3s, transform 0.4s var(--ease-out), background 0.3s;
}
.social-row a:hover { border-color: var(--gold); transform: translateY(-3px); }
.social-row svg { width: 17px; height: 17px; fill: currentColor; }

/* Footer map — desktop only. Spans the brand/Visit/Hours columns to fill the
   void beneath them while Navigate runs down the right. Hidden on mobile,
   where the Visit address links out to directions instead. Kept dark-toned in
   both themes so it reads as part of the footer, not a bright cutout. */
.footer-map { display: none; }
@media (min-width: 64rem) {
  .footer-grid { align-items: start; row-gap: 1.6rem; }
  .footer-nav { grid-column: 4; grid-row: 1 / 3; }
  .footer-map {
    display: block;
    grid-column: 1 / 4;
    grid-row: 2;
    aspect-ratio: 11 / 2;
    filter: invert(0.9) hue-rotate(180deg) saturate(0.5) brightness(0.9);
  }
}
.footer-addr { display: inline-block; }

/* The Complex AP — three-logo cross-links */
.complex-row { padding: 2.6rem 0; border-bottom: 1px solid rgba(236, 224, 203, 0.16); text-align: center; }
.complex-row .complex-label {
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(236, 224, 203, 0.55);
  display: block;
  margin-bottom: 1.6rem;
}
.complex-logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 1rem;
}
.complex-logos a {
  background: #f2e9d5;
  border-radius: 10px;
  padding: 1.1rem 1.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14.5rem;
  max-width: 100%;
  min-height: 6.5rem;
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
}
.complex-logos a:hover { transform: translateY(-4px); box-shadow: 0 16px 34px -14px rgba(0, 0, 0, 0.55); }
.complex-logos img { max-height: 44px; width: auto; object-fit: contain; }
.complex-logos img[alt="Capitoline"] { max-height: 68px; }
.complex-logos a.dark-chip { background: #f2e9d5; }
.complex-logos .dark-chip img {
  background: #221a12;
  padding: 0.5rem 0.8rem;
  border-radius: 8px;
  max-height: 60px; /* 44px logo + padding (border-box) */
}
.complex-logos img[alt="Loteria"] { max-height: 46px; }
.complex-logos .current { outline: 2px solid var(--gold); outline-offset: 3px; }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.8rem 2rem;
  padding-top: 2rem;
  font-size: 0.8rem;
  color: rgba(236, 224, 203, 0.5);
  letter-spacing: 0.04em;
}
.footer-bottom a:hover { color: var(--gold); }

/* The signature: a quiet studio credit in the © line. Warms to gold and
   underlines on hover — a link for whoever goes looking, not a billboard. */
.ff-unit { white-space: nowrap; } /* the "·" wraps with the credit, never orphans */
/* Phones: the credit takes its own deliberate line under the © — no
   orphaned separator, no run-on. Same breakpoint as the footer stack. */
@media (max-width: 44rem) {
  .ff-unit { display: block; }
  .ff-dot { display: none; }
}
.ff-credit {
  border-bottom: 1px solid transparent;
  transition: color 0.4s, border-color 0.4s;
}
.ff-credit:hover { border-bottom-color: var(--gold); }

/* ---------- Discoball easter egg ---------- */

/* A small discoball lives quietly in the footer. At night it glows. Click it.
   Base rules style the SVG fallback (no JS / reduced motion); with JS the
   button upgrades to .is-live — a canvas miniature of the marquee ball,
   turning on the same 17s clock. No label — the motion invites. */
.discoball {
  background: none;
  border: none;
  padding: 0;
  width: 30px;
  height: 30px;
  cursor: pointer;
  align-self: center;
  opacity: 0.55;
  filter: grayscale(0.4);
  transition: opacity 0.4s, transform 0.6s var(--ease-out), filter 0.5s;
}
.discoball svg { width: 30px; height: 30px; display: block; }
.discoball:hover { opacity: 1; filter: none; transform: rotate(14deg) scale(1.12); }
html[data-theme="night"] .discoball {
  opacity: 0.85;
  filter: drop-shadow(0 0 9px rgba(255, 255, 255, 0.5));
}

.discoball.is-live {
  display: inline-flex;
  align-items: center;
  width: auto;
  height: auto;
  opacity: 1;
  filter: none;
}
.discoball.is-live:hover { transform: none; }
html[data-theme="night"] .discoball.is-live { filter: none; opacity: 1; }
.discoball.is-live svg { display: none; }
.ball-orb {
  position: relative;
  width: 34px;
  height: 34px;
  display: block;
  transition: transform 0.6s var(--ease-out);
}
.discoball.is-live:hover .ball-orb,
.discoball.is-live:focus-visible .ball-orb { transform: scale(1.14); }
.ball-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Glow as an opacity-faded halo span, not an animated drop-shadow —
   Safari steps animated shadow filters (same lesson as the qb ball). */
.ball-halo {
  position: absolute;
  inset: -45%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 253, 244, 0.42), rgba(255, 253, 244, 0.1) 55%, transparent 72%);
  opacity: 0.22;
  transition: opacity 0.7s;
  pointer-events: none;
}
html[data-theme="night"] .ball-halo { animation: halo-breathe 4.5s ease-in-out infinite; }
.discoball.is-live:hover .ball-halo { opacity: 1; animation: none; }
@keyframes halo-breathe {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 0.75; }
}
/* ---------- The Drop — the moment itself ----------
   Fixed viewport layers, built by main.js on click: a veil takes the room
   past night-dark (candle warmth pooling at the floor edges — light from
   the room, never from the ball's color), a canvas carries the descending
   mirror ball + its thrown white light, and a line of the house voice
   lands mid-dark. z-index sits above the header (1000), below the film
   grain (2000) — the grain reads as projector haze over the whole scene. */

.drop-stage {
  position: fixed;
  inset: 0;
  z-index: 1500;
  pointer-events: none;
}
.drop-veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 55% at 50% 106%, rgba(233, 162, 78, 0.13), transparent 62%),
    radial-gradient(45% 42% at 4% 102%, rgba(233, 162, 78, 0.1), transparent 72%),
    radial-gradient(45% 42% at 96% 102%, rgba(233, 162, 78, 0.1), transparent 72%),
    linear-gradient(180deg, rgba(5, 3, 9, 0.95) 0%, rgba(7, 4, 9, 0.92) 55%, rgba(14, 8, 6, 0.89) 100%);
  opacity: 0;
  transition: opacity 1.1s var(--ease-in-out);
  cursor: pointer;
}
.drop-stage.on .drop-veil { opacity: 1; pointer-events: auto; }
.drop-canvas {
  position: absolute;
  inset: 0 auto auto 0;
}

/* The line: the quote band's promise, kept. Fixed cream/gold — the ground
   here is always the dark room, whatever the theme underneath.
   Entrance: the words condense out of the dark — a slow opacity ramp
   (gentle start, no pop), a blur-to-sharp resolve, and a soft rise,
   cascading line → hours → CTA. Exit drops the delays and quickens. */
.drop-caption {
  position: absolute;
  left: 50%;
  top: 60%;
  transform: translate(-50%, 0);
  width: min(92vw, 44rem);
  text-align: center;
  opacity: 0;
  transition: opacity 1.4s cubic-bezier(0.45, 0, 0.25, 1);
}
/* Local blackout behind the line — whatever the room holds at this depth
   (logo cards, wordmark), the words own their patch of dark. */
.drop-caption::before {
  content: "";
  position: absolute;
  inset: -34% -18%;
  background: radial-gradient(58% 62% at 50% 46%, rgba(4, 3, 8, 0.8), rgba(4, 3, 8, 0.45) 58%, transparent 78%);
  z-index: -1;
}
.drop-caption.show { opacity: 1; }
.drop-caption .drop-q,
.drop-caption .drop-hours,
.drop-caption .drop-cta {
  opacity: 0;
  transform: translateY(26px);
  filter: blur(7px);
  transition:
    opacity 1.7s cubic-bezier(0.45, 0, 0.25, 1),
    transform 1.7s var(--ease-out),
    filter 1.5s ease,
    color 0.4s,
    border-color 0.4s;
}
.drop-caption.show .drop-q,
.drop-caption.show .drop-hours,
.drop-caption.show .drop-cta {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
.drop-caption.show .drop-hours { transition-delay: 0.3s, 0.3s, 0.3s, 0s, 0s; }
.drop-caption.show .drop-cta { transition-delay: 0.55s, 0.55s, 0.55s, 0s, 0s; }
.drop-caption:not(.show) .drop-q,
.drop-caption:not(.show) .drop-hours,
.drop-caption:not(.show) .drop-cta {
  transition-duration: 0.9s, 0.9s, 0.8s, 0.4s, 0.4s;
  transition-delay: 0s;
}
.drop-q {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 420;
  font-size: clamp(1.7rem, 4.6vw, 3.1rem);
  line-height: 1.12;
  color: #f0e6d2;
  margin: 0 0 0.9rem;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.55);
}
.drop-q strong { font-weight: 480; color: #fdfaf3; }
.drop-hours {
  font-family: var(--font-text);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #e4b76a;
  margin: 0 0 1.5rem;
}
.drop-cta {
  pointer-events: auto;
  display: inline-block;
  font-family: var(--font-text);
  font-size: 0.86rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #f0e6d2;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid rgba(228, 183, 106, 0.55);
  transition: color 0.4s, border-color 0.4s;
}
.drop-cta:hover { color: #ffffff; border-color: #e4b76a; }
.drop-cta .arrow { display: inline-block; transition: transform 0.4s var(--ease-out); }
.drop-cta:hover .arrow { transform: translateX(4px); }

/* The room reacts: under the veil the wolf burns brighter — a neon sign
   glowing through the dark — and the wordmark's stroke lifts to catch
   the sweeping light. */
body.drop-live .footer-scene img {
  filter: brightness(2.1) saturate(1.55);
  animation: wolf-neon 2.6s ease-in-out infinite;
}
body.drop-live .footer-wordmark {
  -webkit-text-stroke-color: rgba(236, 224, 203, 0.55);
}

/* ---------- Responsive ---------- */

@media (max-width: 74rem) {
  .primary-nav { display: none; }
  .nav-burger { display: grid; }
  .header-actions .btn-ghost { display: none; }
}
@media (max-width: 64rem) {
  .dish-grid { grid-template-columns: repeat(2, 1fr); }
  .offer-grid { grid-template-columns: 1fr; }
  .steps-row { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .intro-grid { grid-template-columns: 1fr; }
  .intro-figure { max-width: 26rem; }
}

@media (max-width: 44rem) {
  .form-grid { grid-template-columns: 1fr; }
  .dv-grid { grid-template-columns: 1fr; }
  .dv-slash { display: none; }
  /* Phones: the prints stack instead of overlapping — tilts alone carry the
     collage, and every caption stays whole */
  .print-noon { width: 100%; }
  .print-dusk { width: 74%; margin-top: 1rem; }
  .print-live { width: 88%; margin-left: 0; margin-top: 1rem; }
  .cappy-inner { grid-template-columns: 1fr; }
  /* Stacked: the band's action goes back to left-aligned, and the headline
     needs its base clearance again since nothing sits beside it */
  .cappy-cta .cappy-title { margin-bottom: clamp(1.4rem, 2.6vw, 2.2rem); }
  .cappy-cta-action { justify-content: flex-start; }
  .hero-ctas .btn { width: 100%; }
  .header-actions .btn-solid { display: none; }
  .steps-row { grid-template-columns: 1fr; }
  /* Mobile footer: 2-up to cut vertical space. Brand and Navigate stay
     full-width (readable), Visit + Hours share a row, and Navigate's long
     link list splits into two columns. */
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-nav { grid-column: 1 / -1; }
  .footer-nav ul { display: grid; grid-template-columns: 1fr 1fr; gap: 0.55rem 1.5rem; }
  .menu-photo-strip { grid-template-columns: 1fr; }
  .menu-photo-strip img:nth-child(2) { transform: none; }
  .discoball { right: 1.2rem; width: 48px; }
  .discoball svg { width: 48px; height: 48px; }
  .discoball.is-live { width: auto; }
  .discoball.is-live .ball-orb { width: 42px; height: 42px; }
  .scroll-cue { display: none; }
  .intro-stamp { right: -0.4rem; bottom: 3.6rem; }
}

/* ==========================================================================
   EDITORIAL LAYER — patterns drawn from the top tier of restaurant web design
   (numbered kickers, ghost type, line-mask reveals, parallax, dot leaders,
   pull quotes, footer wordmark)
   ========================================================================== */

/* ---------- Numbered kickers ---------- */

.eyebrow .no {
  white-space: nowrap;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 420;
  letter-spacing: 0.06em;
  text-transform: none;
  color: var(--gold);
  padding-right: 0.85rem;
  margin-right: 0.15rem;
  border-right: 1px solid var(--line-strong);
  font-size: 0.85rem;
}

/* ---------- Ghost typography behind sections ---------- */

.has-ghost { position: relative; overflow: hidden; }
.ghost-word {
  position: absolute;
  z-index: 0;
  font-family: var(--font-display);
  font-weight: 560;
  font-style: italic;
  font-size: clamp(7rem, 24vw, 22rem);
  line-height: 0.8;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  color: transparent;
  -webkit-text-stroke: 1px var(--line);
  opacity: 0.9;
  will-change: transform;
}
html[data-theme="night"] .ghost-word { -webkit-text-stroke: 1px rgba(245, 234, 213, 0.09); }
.has-ghost > .container { position: relative; z-index: 1; }

/* ---------- Line-mask heading reveals ---------- */

.ln { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.ln > span {
  display: inline-block;
  transform: translateY(118%) rotate(1.2deg);
  transform-origin: bottom left;
  transition: transform 1.15s var(--ease-out);
  transition-delay: calc(var(--ld, 0) * 0.14s + var(--d, 0) * 1s);
  will-change: transform;
}
[data-reveal].in .ln > span,
.in .ln > span,
body.is-loaded [data-stagger] .ln > span { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .ln > span { transform: none; }
}

/* ---------- Image entrance: slow settle from a deeper crop ---------- */

[data-reveal] .intro-print-media img,
[data-reveal] .intro-print-media video,
[data-reveal].dish-card .dish-media img,
[data-reveal] .offer-media img {
  transform: scale(1.16);
  /* 1.2s serves both the entrance settle and the hover zoom — anything longer
     makes hover feel unresponsive since this transition stays on the element */
  transition: transform 1.2s var(--ease-out);
}
[data-reveal].in .intro-print-media img,
[data-reveal].in .intro-print-media video,
[data-reveal].dish-card.in .dish-media img,
[data-reveal].in .offer-media img { transform: scale(1); }
[data-reveal].in .intro-print-media:hover img,
[data-reveal].in .intro-print-media:hover video,
[data-reveal].dish-card.in:hover .dish-media img,
[data-reveal].in .offer-media:hover img { transform: scale(1.05); }

/* ---------- Hairline poster frame on heroes ---------- */

.hero::before, .page-hero::before {
  content: "";
  position: absolute;
  inset: clamp(0.8rem, 1.6vw, 1.4rem);
  border: 1px solid rgba(245, 237, 218, 0.2);
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.4s var(--ease-out) 0.9s;
}
body.is-loaded .hero::before, body.is-loaded .page-hero::before { opacity: 1; }

/* ---------- Pull-quote band: the day//night thesis, performed ----------
   Theme-invariant on purpose — the section contains both halves of the brand.
   Line one lives in sunlight, a diagonal seam (the // slash) cuts across,
   line two lands in the dark under a working discoball (click = theme flip). */

.quote-band {
  position: relative;
  text-align: center;
  overflow: hidden;
}
.quote-band .q-line {
  margin: 0 auto;
  max-width: 20em;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 380;
  font-size: clamp(1.7rem, 4.2vw, 3.4rem);
  line-height: 1.15;
}
.quote-band .q-line strong { font-weight: 380; font-style: italic; }

.qb-half { position: relative; }
.qb-day {
  z-index: 1;
  color: #2b2015;
  background: #f4e6c0;
  padding: clamp(4rem, 8.5vw, 6.5rem) var(--gutter) clamp(4rem, 7.5vw, 6rem);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - clamp(2.2rem, 6vw, 4.5rem)), 0 100%);
  overflow: hidden;
}
/* The room in the sun, running under the line — mirror of the night half's
   footage. The parchment wash keeps the ink legible and sun-bleaches the
   photo so it reads as light, not image. */
.qb-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Favor the sunlit windows and stone, not the chair backs */
  object-position: 50% 26%;
  /* Sun-washed grade: lifted exposure, gently faded */
  filter: brightness(1.1) contrast(0.94) saturate(0.88);
}
/* Time-of-day scrim: white noon light floods the top, thins mid-frame,
   and warms to golden hour at the diagonal — the half plays noon→dusk
   before the night half takes over. */
.qb-day::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(75% 85% at 50% -8%, rgba(255, 253, 244, 0.88), rgba(255, 250, 235, 0.35) 55%, transparent 75%),
    /* Sun glare exactly where the line sits — the light writes the words */
    radial-gradient(52% 62% at 50% 52%, rgba(250, 243, 226, 0.82), rgba(250, 243, 226, 0.3) 62%, transparent 78%),
    radial-gradient(80% 60% at 50% 104%, rgba(233, 162, 78, 0.38), transparent 68%),
    linear-gradient(180deg, rgba(242, 231, 205, 0.92), rgba(246, 238, 218, 0.42) 34%, rgba(244, 230, 192, 0.2) 62%, rgba(236, 205, 150, 0.42));
}
.qb-day .q-line {
  position: relative;
  z-index: 1;
  /* Cream halo — keeps the ink solid where the photo shows through */
  text-shadow: 0 1px 14px rgba(244, 230, 192, 0.85), 0 0 34px rgba(244, 230, 192, 0.55);
}
.qb-day .q-line strong { color: #b64421; }
.qb-night {
  color: #f5ead5;
  background: #140d08;
  margin-top: calc(clamp(2.2rem, 6vw, 4.5rem) * -1);
  padding: calc(clamp(6.75rem, 10vw, 8rem) + clamp(2.2rem, 6vw, 4.5rem)) var(--gutter) clamp(4.5rem, 9vw, 7rem);
  overflow: hidden;
}
/* The bar on a Friday night, soft-focus, running quietly under the line.
   The blur is the point — it reads as atmosphere, not footage. */
.qb-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
  opacity: 0.55;
  filter: saturate(0.85) brightness(0.85);
}
/* Scrim above the footage, below the words: white ball-light from the seam,
   candle amber low — no colored disco light */
.qb-night::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(40% 60% at 50% -6%, rgba(255, 255, 255, 0.14), transparent 72%),
    radial-gradient(60% 90% at 14% 100%, rgba(233, 162, 78, 0.14), transparent 65%),
    linear-gradient(180deg, rgba(20, 13, 8, 0.66), rgba(20, 13, 8, 0.4) 45%, rgba(20, 13, 8, 0.72));
  pointer-events: none;
}
.qb-night .q-line, .qb-night cite { position: relative; z-index: 1; }
.qb-night .qb-spark { z-index: 1; } /* sparks stay absolute — just above the scrim */
.qb-night .q-line strong {
  color: #e9a24e;
  text-shadow: 0 0 26px rgba(255, 255, 255, 0.28);
}
.quote-band cite {
  display: block;
  margin-top: 2rem;
  font-family: var(--font-text);
  font-style: normal;
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(245, 234, 213, 0.5);
}

/* The discoball — composed centerpiece at the seam, an explicit control.
   "under the discoball." sits literally under it. */
.qb-ball {
  position: absolute;
  z-index: 2;
  top: calc(50% - clamp(58px, 7.5vw, 84px));
  left: 50%;
  margin-left: calc(clamp(56px, 6.5vw, 80px) / -2);
  width: clamp(56px, 6.5vw, 80px);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
}
.qb-wrap {
  display: block;
  position: relative;
  width: 100%;
  /* Pendulum, not slide: the swing pivots from the cord's ceiling anchor,
     so cord + ball + thrown light arc together like a hung object.
     No filter here: a filter on the wrap would also wrap the cone and
     cord, and Safari renders filter transitions in visible steps. */
  transform-origin: 50% calc(-1 * min(30vh, 15rem));
  animation: qb-sway 9s ease-in-out infinite;
}
/* The ball's glow: a radial halo faded by opacity — the one property both
   Safari and Chromium composite smoothly. Same 0.45s clock as the cone. */
.qb-halo {
  position: absolute;
  left: 50%;
  top: 57%;
  width: 150%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  /* Normal blending on purpose: screen-blended white vanishes against the
     sunlit photo behind the ball's top half. */
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.24) 52%, transparent 74%);
  opacity: 0.65;
  transition: opacity 0.45s var(--ease-out);
  pointer-events: none;
}
.qb-wrap::before {
  content: "";
  position: absolute;
  bottom: calc(100% - 3px);
  left: 50%;
  width: 3px;
  margin-left: -1.5px;
  /* Short cable, long fade — the ball hangs from the light, not from the
     section border 60vh up. Tapers to a point so it reads as a cable
     receding upward, not a scratch across the photo. */
  height: min(30vh, 15rem);
  background: linear-gradient(180deg, transparent, rgba(24, 15, 8, 0.16) 40%, rgba(24, 15, 8, 0.5) 82%, rgba(24, 15, 8, 0.62));
  clip-path: polygon(calc(50% - 0.5px) 0, calc(50% + 0.5px) 0, 100% 100%, 0 100%);
}
.qb-ball svg {
  position: relative; /* above the halo */
  width: 100%;
  height: auto;
  display: block;
  /* Static shadow — never transitioned */
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.45));
  transition: transform 0.45s var(--ease-out);
}
/* Canvas renderer replaces the SVG when JS is live; the SVG stays as the
   no-JS and reduced-motion fallback. */
.qb-canvas { display: none; }
.qb-ball.qb-live .qb-wrap svg { display: none; }
.qb-ball.qb-live .qb-canvas {
  display: block;
  position: relative; /* above the halo */
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.45));
  transition: transform 0.45s var(--ease-out);
}
.qb-ball:hover .qb-halo { opacity: 1; }
.qb-ball:hover svg, .qb-ball:hover .qb-canvas { transform: scale(1.06); }
/* Click burst: room flares while the ball spins up (JS decays the spin) */
.qb-ball.qb-burst .qb-halo, .qb-ball.qb-burst .qb-wrap::after { opacity: 1; }
@keyframes qb-sway {
  0%, 100% { transform: rotate(-1.4deg); }
  50% { transform: rotate(1.4deg); }
}
/* Rotation: the facet band is periodic every 96 units — one period per
   loop, so the seam never shows. */
.qb-track { animation: qb-rotate 17s linear infinite; }
@keyframes qb-rotate { to { transform: translateX(-96px); } }
/* Facets catching the light as they come around. Short cycle, even spacing:
   one soft sparkle roughly every 1.2s somewhere on the ball — a steady
   ambient cadence that can't be mistaken for a delayed hover response. */
.qb-fx {
  opacity: 0;
  animation: qb-glint 7s linear infinite;
  animation-delay: var(--fd, 0s);
}
@keyframes qb-glint {
  0%, 46%, 100% { opacity: 0; }
  50% { opacity: 0.85; }
  54% { opacity: 0; }
}
/* Explicit affordance: a glass chip that names the action, theme-aware text */
.qb-label {
  display: inline-block;
  white-space: nowrap;
  font-family: var(--font-text);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #f5ead5;
  padding: 0.45rem 0.95rem;
  border: 1px solid rgba(245, 234, 213, 0.35);
  border-radius: 999px;
  background: rgba(16, 10, 6, 0.45);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: border-color 0.45s var(--ease-out), background 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out);
}
.qb-ball:hover .qb-label {
  border-color: rgba(245, 234, 213, 0.75);
  background: rgba(16, 10, 6, 0.6);
  box-shadow: 0 0 22px rgba(255, 255, 255, 0.22);
}
/* Ball descends from above when the section reveals */
.qb-ball[data-reveal] { transform: translateY(-46px); }
.qb-ball[data-reveal].in { transform: none; }

/* Thrown light: the ball's spots crawl across the night half, one full
   traverse per 17s — the same period as the ball's revolution, so the
   room and the mirror agree. Spots stretch mid-sweep as they rake the
   "walls" at a shallower angle. */
.qb-spark {
  position: absolute;
  left: var(--sx);
  top: var(--sy);
  width: 11px;
  height: 7px;
  border-radius: 50%;
  background: var(--sc);
  filter: blur(1.5px);
  opacity: 0;
  mix-blend-mode: screen;
  pointer-events: none;
  animation: qb-sweep 17s linear infinite;
  animation-delay: var(--sd, 0s);
}
@keyframes qb-sweep {
  0% { transform: translateX(-7vw) scaleX(1); opacity: 0; }
  10% { opacity: 0.5; }
  50% { transform: translateX(0) scaleX(2.6); opacity: 0.65; }
  90% { opacity: 0.45; }
  100% { transform: translateX(7vw) scaleX(1); opacity: 0; }
}
@keyframes qb-twinkle {
  from { opacity: 0.12; transform: scale(0.8); }
  to { opacity: 0.5; transform: scale(1.25); }
}

/* ---------- Section-head ornament ---------- */

.section-head.centered h2::after {
  content: "";
  display: block;
  width: 1px;
  height: clamp(1.8rem, 3vw, 2.8rem);
  background: linear-gradient(180deg, var(--gold), transparent);
  margin: 1.4rem auto 0;
}

/* ---------- Marquee: bigger, serif, unmissable ---------- */

.marquee { padding: 1.35rem 0; }
.marquee-track span {
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  font-style: italic;
  font-weight: 420;
  letter-spacing: 0.24em;
  color: var(--ink);
  opacity: 0.85;
}
.marquee-track span i { font-style: normal; color: var(--gold); }

/* ---------- Menu page: dot leaders, larger serif names ---------- */

.menu-item {
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
}
.menu-item::before {
  content: "";
  grid-column: 2;
  grid-row: 1;
  border-bottom: 1px dotted var(--line-strong);
  margin: 0 0.8rem;
  transform: translateY(-0.3em);
}
.menu-item .name { grid-column: 1; grid-row: 1; font-size: 1.28rem; font-style: italic; font-weight: 440; }
.menu-item .price { grid-column: 3; grid-row: 1; color: var(--gold); letter-spacing: 0.04em; }
.menu-item .desc { grid-column: 1 / -1; grid-row: 2; padding-top: 0.15rem; }
.menu-section-title { font-style: italic; font-weight: 400; }
.menu-section-title::after {
  content: "· · ·";
  display: block;
  font-size: 0.9rem;
  letter-spacing: 0.9em;
  color: var(--gold);
  margin-top: 0.9rem;
  font-style: normal;
}

/* ---------- Intro: drop cap ---------- */

.drop-cap::first-letter {
  font-family: var(--font-display);
  font-size: 3.1em;
  font-weight: 440;
  float: left;
  line-height: 0.82;
  padding: 0.06em 0.14em 0 0;
  color: var(--acc);
}

/* ---------- Footer wordmark ---------- */

.footer-wordmark {
  font-family: var(--font-display);
  font-weight: 540;
  font-size: clamp(2.6rem, 10.4vw, 11rem);
  line-height: 0.95;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  color: transparent;
  -webkit-text-stroke: 1px rgba(236, 224, 203, 0.28);
  margin: 0 0 clamp(2.5rem, 5vw, 4.5rem);
  white-space: nowrap;
  transition: color 1.2s var(--ease-out), -webkit-text-stroke-color 1.2s;
  cursor: default;
}
.footer-wordmark:hover { color: rgba(236, 224, 203, 0.16); }
html[data-theme="night"] .footer-wordmark:hover {
  color: transparent;
  -webkit-text-stroke-color: color-mix(in srgb, var(--neon) 55%, transparent);
  text-shadow: 0 0 34px rgba(238, 95, 165, 0.22);
}

/* ---------- Day-mode atmosphere (parity with night's candlelight) ---------- */

/* Ghost words must actually read in daylight */
html[data-theme="day"] .ghost-word {
  -webkit-text-stroke-color: rgba(84, 55, 22, 0.24);
}

/* Plain sections: a slow sun gradient instead of dead-flat cream */
html[data-theme="day"] .section:not(.section-deep):not(.section-elev):not(.gift-band) {
  background:
    radial-gradient(70% 55% at 85% 0%, rgba(255, 199, 105, 0.17), transparent 60%),
    linear-gradient(180deg, transparent, rgba(198, 141, 60, 0.07));
}

/* Marquee: sun-striped awning band, not another cream strip */
html[data-theme="day"] .marquee {
  background: linear-gradient(180deg, #efdcb2, #e9d3a2);
  border-block-color: rgba(43, 32, 21, 0.24);
}

/* Gift band: a breath of olive so day isn't all one temperature */
html[data-theme="day"] .gift-band {
  background:
    radial-gradient(80% 75% at 50% 0%, rgba(92, 104, 54, 0.12), transparent 68%),
    linear-gradient(180deg, transparent, rgba(92, 104, 54, 0.05));
}

/* Signup band picks up the sand tone */
html[data-theme="day"] .signup-band {
  background: linear-gradient(180deg, #f3e6c4, #eeddb4);
}

/* Ghost type on saturated / photographic grounds */
.cappy .ghost-word { -webkit-text-stroke-color: rgba(253, 246, 233, 0.2); }
html[data-theme="night"] .cappy .ghost-word { -webkit-text-stroke-color: rgba(246, 223, 200, 0.13); }
.party-teaser h2 em { color: #e4b76a; }

/* ---------- Dish grid: full editorial spread on desktop ----------
   Breaks out of the 74rem container to a 94rem stage, varies card heights,
   and scales the caption typography with the larger canvas. */

@media (min-width: 64rem) {
  .dish-grid {
    width: min(94rem, 100vw - var(--gutter) * 2);
    margin-inline: calc((min(94rem, 100vw - var(--gutter) * 2) - 100%) / -2);
  }
  /* alternating image heights + a dropped second/fourth column = editorial rhythm */
  .dish-card:nth-child(odd) .dish-media { aspect-ratio: 3 / 4; }
  .dish-card:nth-child(even) .dish-media { aspect-ratio: 3 / 3.4; }
  .dish-card:nth-child(2), .dish-card:nth-child(4) { transform: translateY(3rem); }
  .menu-cta-row { margin-top: clamp(5.5rem, 8vw, 7rem); }
}

/* ---------- Editorial layer responsive ---------- */

@media (max-width: 44rem) {
  .ghost-word { font-size: clamp(5rem, 30vw, 9rem); opacity: 0.6; }
  .hero::before, .page-hero::before { inset: 0.65rem; }
  .menu-item .name { font-size: 1.12rem; }
}

/* ==========================================================================
   IMPROVEMENT LAYER — design pass 2026-07-07
   Theme-flip choreography, type floor, olive temperature, section upgrades
   ========================================================================== */

/* ---------- Theme-flip veil: dusk falls / morning comes back ----------
   The flip is the brand's signature move, so the veil is a stage, not a
   sheet. Night: dusk drops from above, stars twinkle in, a crescent moon
   rises and "Buonanotte" flickers on like the neon over Cookman — then
   the curtain keeps falling and exits through the floor. Day: light rises
   from below, a sun climbs with turning rays, gold motes drift, a streak
   of morning light sweeps "Buongiorno" — the veil exits through the top.
   The theme flips underneath at full cover (~0.62s). Total: 2.3s. */

.theme-veil {
  position: fixed;
  inset: 0;
  z-index: 2500;
  pointer-events: none;
}
/* Soft horizon, the cheap way: a gradient strip riding beyond the veil's
   leading edge — dusk creeps ahead of the curtain (or morning light spills
   up). A plain gradient costs nothing; the box-shadow it replaces forced a
   huge blurred raster of a viewport-sized layer every flip. Trailing edges
   need no feather: they reveal the already-flipped page in near-matching
   tones. */
.theme-veil::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 26vh;
  pointer-events: none;
}
/* Clips the parallaxing scene to the veil (the veil itself can't clip —
   the feather ::after lives outside its bounds) */
.veil-clip {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.theme-veil.to-night::after {
  top: 100%;
  background: linear-gradient(180deg, rgba(13, 8, 5, 0.85), rgba(13, 8, 5, 0));
}
.theme-veil.to-day::after {
  bottom: 100%;
  background: linear-gradient(0deg, rgba(255, 238, 194, 0.92), rgba(255, 238, 194, 0));
}
/* Same film grain as the site — the veil is part of the room */
.theme-veil::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.06;
}
.theme-veil.to-night {
  transform: translateY(-102%);
  background:
    radial-gradient(110% 55% at 50% 108%, rgba(233, 162, 78, 0.26), transparent 62%),
    radial-gradient(60% 45% at 74% 20%, rgba(238, 95, 165, 0.13), transparent 65%),
    linear-gradient(180deg, #2b1739 0%, #1c0f27 42%, #140b13 72%, #0d0805 100%);
  animation: veil-fall 2.3s both;
}
.theme-veil.to-day {
  transform: translateY(102%);
  background:
    radial-gradient(95% 60% at 50% -8%, rgba(255, 240, 200, 0.95), transparent 68%),
    radial-gradient(55% 40% at 24% 82%, rgba(182, 68, 33, 0.1), transparent 65%),
    linear-gradient(180deg, #ffeec2 0%, #f8e1a9 48%, #f2e7cd 100%);
  animation: veil-rise 2.3s both;
}
/* Dusk enters from above and keeps falling out the bottom */
@keyframes veil-fall {
  0%   { transform: translateY(-102%); animation-timing-function: cubic-bezier(0.7, 0, 0.3, 1); }
  27%  { transform: translateY(0); }
  74%  { transform: translateY(0); animation-timing-function: cubic-bezier(0.7, 0, 0.3, 1); }
  100% { transform: translateY(102%); }
}
/* Morning rises from below and exits through the top */
@keyframes veil-rise {
  0%   { transform: translateY(102%); animation-timing-function: cubic-bezier(0.7, 0, 0.3, 1); }
  27%  { transform: translateY(0); }
  74%  { transform: translateY(0); animation-timing-function: cubic-bezier(0.7, 0, 0.3, 1); }
  100% { transform: translateY(-102%); }
}

/* ----- The scene riding the veil ----- */

.veil-scene {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  text-align: center;
  padding: 0 1.25rem;
}
/* Depth: the scene isn't glued to the sheet. It settles into place as the
   curtain lands, and hangs back as the curtain leaves — the moon lingers a
   beat while dusk keeps falling (and the sun while morning keeps rising). */
.to-night .veil-scene { animation: veil-scene-night 2.3s both; }
.to-day .veil-scene { animation: veil-scene-day 2.3s both; }
@keyframes veil-scene-night {
  0%   { transform: translateY(15%); animation-timing-function: cubic-bezier(0.7, 0, 0.3, 1); }
  27%  { transform: translateY(0); }
  74%  { transform: translateY(0); animation-timing-function: cubic-bezier(0.7, 0, 0.3, 1); }
  100% { transform: translateY(-32%); }
}
@keyframes veil-scene-day {
  0%   { transform: translateY(-15%); animation-timing-function: cubic-bezier(0.7, 0, 0.3, 1); }
  27%  { transform: translateY(0); }
  74%  { transform: translateY(0); animation-timing-function: cubic-bezier(0.7, 0, 0.3, 1); }
  100% { transform: translateY(32%); }
}

/* Stars pop in at random spots (positions + delays set inline by JS) */
.veil-star {
  position: absolute;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
  opacity: 0;
  animation: veil-twinkle 1.4s ease-out both;
}
@keyframes veil-twinkle {
  0% { opacity: 0; transform: scale(0.3); }
  35% { opacity: 1; transform: scale(1.3); }
  55% { opacity: 0.35; }
  75%, 100% { opacity: 0.9; transform: scale(1); }
}

/* Morning motes — warm dust in the light, drifting up */
.veil-mote {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 250, 230, 0.9);
  box-shadow: 0 0 10px rgba(255, 214, 140, 0.75);
  opacity: 0;
  animation: veil-float 1.9s ease-out both;
}
@keyframes veil-float {
  0% { opacity: 0; transform: translateY(26px); }
  30% { opacity: 0.9; }
  100% { opacity: 0; transform: translateY(-44px); }
}

/* Crescent moon rises */
.veil-moon {
  position: relative;
  width: clamp(44px, 7vw, 62px);
  height: clamp(44px, 7vw, 62px);
  border-radius: 50%;
  background: #f4ecdc;
  box-shadow: 0 0 28px rgba(244, 236, 220, 0.35), 0 0 70px rgba(244, 236, 220, 0.15);
  overflow: hidden;
  opacity: 0;
  animation: veil-orb-rise 1.1s var(--ease-out) 0.45s both;
  margin-bottom: 0.35rem;
}
.veil-moon::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #1e1128;
  transform: translate(32%, -20%);
}

/* Sun climbs, rays turning */
.veil-sun {
  position: relative;
  width: clamp(48px, 7.5vw, 68px);
  height: clamp(48px, 7.5vw, 68px);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff3cf, #f6bd55 55%, #e79a2e);
  box-shadow: 0 0 40px rgba(246, 189, 85, 0.55), 0 0 100px rgba(246, 189, 85, 0.3);
  opacity: 0;
  animation: veil-orb-rise 1.1s var(--ease-out) 0.45s both;
  margin-bottom: 0.35rem;
}
.veil-sun::before {
  content: "";
  position: absolute;
  inset: -120%;
  border-radius: 50%;
  background: repeating-conic-gradient(rgba(255, 244, 214, 0.9) 0deg 3deg, transparent 3deg 15deg);
  -webkit-mask-image: radial-gradient(circle, transparent 30%, #000 36%, transparent 76%);
  mask-image: radial-gradient(circle, transparent 30%, #000 36%, transparent 76%);
  animation: veil-rays 18s linear infinite;
}
@keyframes veil-rays {
  to { transform: rotate(360deg); }
}
@keyframes veil-orb-rise {
  0% { opacity: 0; transform: translateY(36px) rotate(-12deg); }
  100% { opacity: 1; transform: translateY(0) rotate(0deg); }
}

/* Eyebrow above the greeting */
.veil-eyebrow {
  margin: 0;
  font-family: var(--font-text);
  font-size: 0.72rem;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  opacity: 0;
  animation: veil-fade-up 0.9s var(--ease-out) 0.5s both;
}
.to-night .veil-eyebrow { color: #e4b76a; }
.to-day .veil-eyebrow { color: #a4762f; }

/* The greeting — letters rise one by one (delays set inline by JS) */
.veil-word {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2.8rem, 10vw, 6.2rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.veil-word span {
  display: inline-block;
  opacity: 0;
  animation: veil-letter 0.7s var(--ease-out) both;
}
@keyframes veil-letter {
  0% { opacity: 0; transform: translateY(0.55em); filter: blur(6px); }
  100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}
/* Night: neon-sign treatment — bright core, pink halo, a startup flicker */
.to-night .veil-word {
  color: #ffcde6;
  text-shadow:
    0 0 6px rgba(238, 95, 165, 0.9),
    0 0 24px rgba(238, 95, 165, 0.55),
    0 0 64px rgba(238, 95, 165, 0.35);
  animation: veil-neon 0.55s linear 1.05s both;
}
@keyframes veil-neon {
  0%, 100% { opacity: 1; }
  14% { opacity: 0.5; }
  22% { opacity: 1; }
  34% { opacity: 0.65; }
  46% { opacity: 1; }
}
.to-day .veil-word { color: #b64421; }

/* Morning light streak sweeping the scene */
.veil-streak {
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.55) 48%, transparent 58%);
  opacity: 0;
  animation: veil-shine 1.2s ease-in-out 0.75s both;
}
@keyframes veil-shine {
  0% { transform: translateX(-55%); opacity: 0; }
  25% { opacity: 1; }
  100% { transform: translateX(55%); opacity: 0; }
}

/* The brand mark: day // night, active side lit */
.veil-daynight {
  margin: 0.4rem 0 0;
  font-family: var(--font-text);
  font-size: 0.72rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  opacity: 0;
  animation: veil-fade-up 0.8s var(--ease-out) 0.95s both;
}
.veil-daynight span { opacity: 0.38; }
.veil-daynight i { font-style: normal; opacity: 0.55; padding: 0 0.2em; }
.veil-daynight span.on { opacity: 1; }
.to-night .veil-daynight { color: #f5ead5; }
.to-night .veil-daynight span.on { color: #e9a24e; text-shadow: 0 0 12px rgba(233, 162, 78, 0.45); }
.to-day .veil-daynight { color: #2b2015; }
.to-day .veil-daynight span.on { color: #b64421; }

@keyframes veil-fade-up {
  0% { opacity: 0; transform: translateY(14px); }
  100% { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .theme-veil { display: none; }
}

/* ---------- Section closer — design pass 2026-07-13 ----------
   Chapter-end punctuation for Nº 01: the house slash at fleuron scale,
   flanked by hairlines that fade outward. Used only at the 01→02 seam —
   every other junction already has a band, so this is the one place the
   page needs a terminal gesture. */

.section-close {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  margin-top: clamp(3.5rem, 7vw, 5.5rem);
}
.section-close span {
  font-family: var(--font-display);
  font-size: 1.1rem;
  line-height: 1;
  color: var(--acc);
  opacity: 0.8;
}
.section-close i {
  height: 1px;
  width: clamp(3rem, 9vw, 6.5rem);
  background: linear-gradient(90deg, transparent, var(--line-strong));
}
.section-close i:last-child {
  background: linear-gradient(90deg, var(--line-strong), transparent);
}

/* With the closer marking the end, the stacked section padding at the
   seam comes down from ~17rem to editorial air: the mark sits tight to
   its own chapter, with roughly twice that breath before Nº 02 opens. */
#about { padding-bottom: clamp(2.5rem, 5vw, 4rem); }
#menu-highlights { padding-top: clamp(3.5rem, 7vw, 6rem); }
/* Nº 02 → quote band: the CTA row hands off to the sunlit band in one
   breath — the band's photography announces the act break now. */
#menu-highlights { padding-bottom: clamp(3rem, 6vw, 5rem); }

/* ---------- Zero-proof: the pour as a living print — 2026-07-13 ----------
   The 1080×1920 portrait footage gets a portrait treatment: a large matted
   print (intro-collage language) opposite the copy, in a contained spread.
   3:4 crop from the 9:16 source keeps the lineup sharp — no pano stretch. */

.na-grid {
  display: grid;
  grid-template-columns: 1.05fr minmax(0, 27rem);
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: center;
}
.na-copy { max-width: 34rem; }
.na-print .intro-print-media video {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: 50% 55%;
}
.na-cta { margin: 1.6rem 0 0; }
.na-cta-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 0.55rem; }
@media (max-width: 64rem) {
  .na-grid { grid-template-columns: 1fr; }
  .na-print { justify-self: center; width: min(100%, 24rem); }
}

/* ---------- Type floor: no label below ~11.5px ---------- */

.qb-label { font-size: 0.72rem; }
.offer-card .offer-tag { font-size: 0.72rem; }
.menu-overlay nav a::before { font-size: 0.72rem; }
.dish-caption .go { font-size: 0.72rem; }
.scroll-cue { font-size: 0.72rem; }

/* ---------- Day temperature: let the olive breathe ---------- */

.checklist li::before { background: var(--acc-2); }
.offer-card .offer-tag { color: var(--acc-2); }
.menu-section-sub { color: color-mix(in srgb, var(--acc-2) 55%, var(--ink-2)); }

/* ---------- Marquee: the stars go neon after dark ---------- */

html[data-theme="night"] .marquee-track span i {
  color: var(--neon);
  text-shadow: 0 0 12px rgba(238, 95, 165, 0.55);
}

/* ---------- Hero: quieter eyebrow (one pill on screen is enough) ---------- */

.hero-eyebrow {
  border: 0;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  padding: 0;
}

/* Night hero: a few sparks drift over the footage */
.hero-spark {
  position: absolute;
  z-index: 1;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--sc, #ffffff);
  filter: blur(1px);
  opacity: 0;
  mix-blend-mode: screen;
  pointer-events: none;
}
html[data-theme="night"] .hero-spark {
  animation: qb-twinkle 6s ease-in-out infinite alternate;
  animation-delay: var(--sd, 0s);
}

/* ---------- Nº 02 — the scene: scroll turns the lights down ----------
   A pinned viewport; scroll progress (--p, set by JS, 0→1) dissolves the
   room from day to night: photo crossfade, dusk scrim, sparks, and the
   headline's "Day" handing the light to "Night". No JS → day, fully legible. */

.scene { position: relative; height: 300vh; }
.scene-pin {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  display: grid;
  color: #f5edda;
}
.scene-media { position: absolute; inset: 0; }
.scene-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.scene-night { opacity: clamp(0, (var(--p, 0) - 0.18) / 0.45, 1); }
/* Always-on text protection at the base of the frame */
.scene-media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(12, 7, 4, 0.22), transparent 30%, transparent 44%, rgba(12, 7, 4, 0.78));
}
/* Dusk scrim deepens over the whole frame, then a candle pool blooms low */
.scene-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(85% 60% at 50% 100%, rgba(233, 162, 78, 0.2), transparent 60%),
    linear-gradient(180deg, rgba(12, 7, 4, 0.5), rgba(12, 7, 4, 0.18) 40%, rgba(9, 5, 3, 0.78));
  opacity: clamp(0.2, var(--p, 0) + 0.2, 1);
}
.scene-spark {
  position: absolute;
  left: var(--sx);
  top: var(--sy);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sc);
  filter: blur(1.2px);
  mix-blend-mode: screen;
  opacity: calc(clamp(0, (var(--p, 0) - 0.72) / 0.2, 1) * 0.75);
  transform: scale(calc(0.6 + clamp(0, (var(--p, 0) - 0.72) / 0.2, 1) * 0.6));
}
.scene-head {
  grid-area: 1 / 1;
  align-self: end;
  z-index: 2;
  width: min(var(--container), 100% - var(--gutter) * 2);
  margin-inline: auto;
  padding-bottom: clamp(7.5rem, 16vh, 10rem);
}
.scene-head .eyebrow { color: #e9a24e; }
.scene-head .eyebrow .no { border-right-color: rgba(245, 237, 218, 0.3); }
.scene-title {
  font-size: var(--fs-h1);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.35em;
  text-shadow: 0 2px 30px rgba(12, 8, 5, 0.6);
}
.scene-title .slashes { color: #e9a24e; font-style: italic; }
.scene-t-day { opacity: calc(1 - clamp(0, (var(--p, 0) - 0.25) / 0.45, 1) * 0.62); }
.scene-t-night {
  opacity: calc(0.38 + clamp(0, (var(--p, 0) - 0.25) / 0.45, 1) * 0.62);
  text-shadow: 0 0 26px rgba(238, 95, 165, calc(clamp(0, (var(--p, 0) - 0.5) / 0.4, 1) * 0.65));
}
.scene-line {
  grid-area: 1 / 1;
  align-self: end;
  z-index: 2;
  width: min(var(--container), 100% - var(--gutter) * 2);
  margin: 0 auto;
  padding-bottom: clamp(4.2rem, 9vh, 6rem);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 380;
  font-size: clamp(1.05rem, 1.9vw, 1.45rem);
  max-width: none;
  text-shadow: 0 1px 22px rgba(12, 8, 5, 0.65);
}
.scene-line em { color: #e9a24e; font-style: normal; }
.scene-line-day { opacity: calc(0.95 - clamp(0, (var(--p, 0) - 0.2) / 0.3, 1) * 0.95); }
.scene-line-night { opacity: calc(clamp(0, (var(--p, 0) - 0.55) / 0.3, 1) * 0.95); }
.scene-cue {
  position: absolute;
  z-index: 2;
  bottom: 1.6rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(245, 237, 218, 0.75);
  opacity: calc(0.9 - var(--p, 0) * 2.4);
}
@media (max-width: 44rem) {
  .scene { height: 240vh; }
  .scene-head { padding-bottom: clamp(8.5rem, 20vh, 11rem); }
}

/* ---------- Intro: one strong print, no layering clutter ----------
   (A second tilted image used to peek out behind the print — it read as an
   accident, not a collage. The matted print + the address chop carry it.) */

/* ---------- Dish index: feature spread + price chips + full-menu tile ------ */

.dish-price {
  position: absolute;
  z-index: 1;
  top: 0.9rem;
  right: 0.9rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  color: #f5edda;
  background: rgba(18, 12, 8, 0.62);
  border: 1px solid rgba(245, 237, 218, 0.35);
  border-radius: 999px;
  padding: 0.28rem 0.8rem;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.35s, transform 0.45s var(--ease-out);
}
.dish-price::before { content: "$"; font-size: 0.78em; opacity: 0.75; margin-right: 1px; }
.dish-card:hover .dish-price { opacity: 1; transform: none; }
@media (hover: none) { .dish-price { opacity: 1; transform: none; } }

.dish-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.9rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: clamp(1.4rem, 2.5vw, 2.2rem);
  transition: border-color 0.4s, background-color 0.5s, transform 0.5s var(--ease-out);
}
.dish-tile-no { color: var(--gold); font-size: 1.3rem; }
.dish-tile-line {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2vw, 1.9rem);
  line-height: 1.15;
  font-weight: 440;
}
.dish-tile-line em { color: var(--acc); font-weight: 380; }
.dish-tile .go {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--acc);
  transition: gap 0.4s;
}
.dish-tile:hover { border-color: var(--acc); background: var(--bg-elev); transform: translateY(-4px); }

@media (min-width: 64rem) {
  /* Feature spread: Grandpa anchors two columns, tile closes the index */
  .dish-grid { grid-template-columns: repeat(3, 1fr); }
  .dish-card:nth-child(4) { transform: none; }
  .dish-card.feature { grid-column: span 2; }
  .dish-card.feature .dish-media { aspect-ratio: 16 / 10.6; }
  .dish-card.feature .dish-caption b { font-size: clamp(1.5rem, 2vw, 2rem); }
}

/* Mobile: the dish index becomes a snap rail instead of a cramped 2-up grid */
@media (max-width: 44rem) {
  .dish-grid {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    margin-inline: calc(var(--gutter) * -1);
    padding: 0.25rem var(--gutter) 1.25rem;
    scrollbar-width: none;
  }
  .dish-grid::-webkit-scrollbar { display: none; }
  .dish-card, .dish-tile { flex: 0 0 72vw; scroll-snap-align: center; }
  .dish-card .dish-media { aspect-ratio: 3 / 3.4; }
}

/* ---------- The oven: a dark room in both themes ---------- */

.oven-band {
  position: relative;
  background:
    radial-gradient(70% 90% at 22% 78%, rgba(233, 108, 42, 0.16), transparent 60%),
    radial-gradient(45% 60% at 78% 20%, rgba(233, 162, 78, 0.08), transparent 65%),
    linear-gradient(180deg, #1a100a, #120a05 70%, #16100b);
  color: #f5ead5;
  border-block: 1px solid rgba(233, 162, 78, 0.18);
  overflow: hidden;
}
.oven-band .ghost-word { -webkit-text-stroke-color: rgba(245, 234, 213, 0.08); }
.oven-band .eyebrow { color: #e9a24e; }
.oven-band .eyebrow .no { color: #e4b76a; border-right-color: rgba(245, 234, 213, 0.25); }
.oven-band h2 { color: #f5ead5; }
.oven-band h2 em { color: #e9a24e; text-shadow: 0 0 26px rgba(233, 108, 42, 0.45); }
.oven-band .lead { color: rgba(245, 234, 213, 0.75); }
/* The fire's edge melts into the band's darkness instead of sitting in a
   frame; a faint ember glow spills from the film onto the copy side. */
.oven-band .film-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 58%, rgba(20, 12, 6, 0.55) 100%),
    linear-gradient(180deg, rgba(20, 12, 6, 0.3), transparent 20%, transparent 80%, rgba(20, 12, 6, 0.35));
  pointer-events: none;
}
.oven-band .film-copy { position: relative; }
.oven-band .film-copy::before {
  content: "";
  position: absolute;
  top: 50%; left: -12%;
  width: 60%;
  aspect-ratio: 1;
  transform: translateY(-50%);
  background: radial-gradient(50% 50% at 50% 50%, rgba(233, 108, 42, 0.16), transparent 70%);
  filter: blur(30px);
  pointer-events: none;
}
.oven-band .video-unmute {
  color: rgba(245, 234, 213, 0.85);
  border-color: rgba(245, 234, 213, 0.35);
  background: rgba(18, 12, 8, 0.4);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.oven-band .video-unmute:hover { color: #f5ead5; border-color: rgba(245, 234, 213, 0.75); }
/* Ledger in the dark room — same rows, ember palette */
.oven-band .film-ledger li { border-color: rgba(245, 234, 213, 0.16); }
.oven-band .fl-name { color: #f5ead5; }
.oven-band .fl-name em { color: rgba(245, 234, 213, 0.55); }
.oven-band .fl-desc { color: rgba(245, 234, 213, 0.62); }
.oven-band .text-link { color: rgba(245, 234, 213, 0.85); }
.oven-band .text-link:hover { color: #f5ead5; }

/* ---------- Cappy Hour: the parm sliders are the show ----------
   No marquee — the section leads with the thing people actually come for.
   The sliders as a background-removed cutout sitting in a warm pool of
   light: a spotlight glow behind the plate, a grounded table shadow
   beneath it (so it's plated, not floating), a gentle lift on hover,
   handwritten-style caption underneath, "Cin Cin" ghost type behind. */

.cappy-inner { position: relative; z-index: 1; }
.cappy p.lead { max-width: 30em; }
.cappy p.lead b { font-weight: 700; }
.cappy-ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.1rem;
  margin-top: clamp(1.6rem, 2.6vw, 2.2rem);
}
.cappy-note {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.98rem;
  opacity: 0.75;
}
.cappy-media {
  position: relative;
  margin: 0;
  max-width: 33rem;
  justify-self: end;
  width: 100%;
  align-self: center;
}
/* the spotlight: a warm pool of light the plate sits in */
.cappy-media::before {
  content: "";
  position: absolute;
  inset: -16% -12%;
  background: radial-gradient(46% 42% at 50% 54%, rgba(255, 197, 110, 0.30), transparent 72%);
  pointer-events: none;
}
html[data-theme="night"] .cappy-media::before {
  background: radial-gradient(46% 42% at 50% 54%, rgba(255, 178, 102, 0.22), transparent 72%);
}
/* the table: a grounded ellipse under the plate so it's plated, not floating */
.cappy-media::after {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: -3.5%;
  height: 11%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(20, 8, 4, 0.55), transparent 72%);
  filter: blur(8px);
  transition: transform 0.7s var(--ease-out), opacity 0.7s var(--ease-out);
}
/* a big ghost star behind the plate — fills the right side on desktop */
.cappy-star {
  position: absolute;
  top: -32%;
  right: -8%;
  font-size: clamp(20rem, 34vw, 34rem);
  opacity: 0.07;
  font-family: var(--font-display);
  line-height: 1;
  transform: rotate(12deg);
  pointer-events: none;
  user-select: none;
}
@media (max-width: 900px) {
  .cappy-star { display: none; }
}
/* wrapper carries the transform so the img's drop-shadow renders against
   its alpha, not its bounding box — avoids Safari's phantom-rectangle bug */
.cappy-cutout-wrap {
  position: relative;
  z-index: 1;
  display: block;
  transform: rotate(-1.5deg);
  transition: transform 0.7s var(--ease-out);
}
.cappy-cutout {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 16px 20px rgba(0, 0, 0, 0.35));
  transition: filter 0.7s var(--ease-out);
}
.cappy-media:hover .cappy-cutout-wrap {
  transform: rotate(-0.5deg) translateY(-10px);
}
.cappy-media:hover .cappy-cutout {
  filter: drop-shadow(0 30px 32px rgba(0, 0, 0, 0.42));
}
.cappy-media:hover::after { transform: scaleX(0.92); opacity: 0.72; }
.cappy-caption {
  position: absolute;
  bottom: -2.4rem;
  left: 14%;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  transform: rotate(-2deg);
  opacity: 0.85;
  z-index: 2;
}
@media (max-width: 64rem) {
  .cappy-media { justify-self: center; max-width: 24rem; }
}
@media (max-width: 44rem) {
  .cappy-media { max-width: 21rem; }
  .cappy-caption { position: static; display: inline-block; margin-top: 0.6rem; }
}

/* ---------- Gift band: the card is the shot ---------- */

.gift-inner {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
  text-align: left;
}
.gift-inner .gift-links { justify-content: flex-start; }
.gift-inner .lead { margin-inline: 0; }
.gift-visual { perspective: 900px; display: grid; place-items: center; position: relative; }
/* The second card in the deck — lives on the (untransformed) wrapper so it
   actually paints behind the face card. */
.gift-visual::before {
  content: "";
  position: absolute;
  width: min(100%, 22rem);
  aspect-ratio: 8 / 5;
  border-radius: 16px;
  background: linear-gradient(160deg, #2b2015, #463526);
  transform: rotate(2deg) translate(5%, 10%);
  box-shadow: 0 24px 48px -26px rgba(0, 0, 0, 0.6);
}
/* The real card — black, with the mermaid, the eye and the she-wolf in neon.
   Photographed, not mocked. The tilt and the second card in the deck stay. */
.gift-card {
  position: relative;
  display: block;
  width: min(100%, 22rem);
  height: auto;
  border-radius: 14px; /* physical card corner at this size */
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 30px 60px -28px rgba(30, 18, 8, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.14);
  transform: rotate(-4deg);
  transition: transform 0.7s var(--ease-out), box-shadow 0.7s var(--ease-out);
}
.gift-visual:hover .gift-card { transform: rotate(-1deg) translateY(-8px); box-shadow: 0 42px 74px -30px rgba(30, 18, 8, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.14); }
/* At night the card's neon inks get to glow a little */
html[data-theme="night"] .gift-card {
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: 0 30px 60px -26px rgba(0, 0, 0, 0.9), 0 0 34px rgba(238, 95, 165, 0.14);
}
html[data-theme="night"] .gift-visual:hover .gift-card {
  box-shadow: 0 42px 74px -30px rgba(0, 0, 0, 0.95), 0 0 44px rgba(238, 95, 165, 0.2);
}
@media (max-width: 64rem) {
  .gift-inner { grid-template-columns: 1fr; text-align: center; }
  .gift-inner .gift-links { justify-content: center; }
  .gift-inner .lead { margin-inline: auto; }
  .gift-inner .eyebrow { justify-content: center; }
  .gift-card { transform: rotate(-3deg) scale(0.95); }
}

/* ---------- Quote band: the ball throws light — faint always, full when
   touched. Hover-gating the whole payoff meant most visitors never saw the
   ball do anything. As a child of .qb-wrap the cone sways with the ball. ---------- */

.qb-wrap::after {
  content: "";
  position: absolute;
  top: 82%;
  left: 50%;
  width: clamp(240px, 32vw, 440px);
  aspect-ratio: 1 / 1.35;
  transform: translateX(-50%);
  /* White light only — the ball is a mirror, not a rainbow */
  background: conic-gradient(from 168deg at 50% 0%,
    transparent 0deg,
    rgba(255, 255, 255, 0.24) 8deg,
    rgba(255, 250, 240, 0.16) 14deg,
    transparent 24deg,
    transparent 336deg,
    rgba(255, 255, 255, 0.2) 348deg,
    transparent 360deg);
  /* Beams dissipate into the dark before reaching the box edge — a beam
     that ends in a right angle reads as a rendering bug, not light. */
  -webkit-mask-image: linear-gradient(180deg, #000 35%, transparent 92%);
  mask-image: linear-gradient(180deg, #000 35%, transparent 92%);
  opacity: 0.45;
  /* Same clock as the ball's glow — a longer duration here made the beam
     lead on hover-in and finish alone, reading as a three-step relay. */
  transition: opacity 0.45s var(--ease-out);
  pointer-events: none;
  /* The beams drift on the sway's period, phase-lagged 1.2s behind the
     ball — light trails its source like a hung fixture's throw. */
  transform-origin: 50% 0;
  animation: qb-cone-drift 9s ease-in-out -1.2s infinite;
}
@keyframes qb-cone-drift {
  0%, 100% { transform: translateX(-50%) rotate(-2deg); }
  50% { transform: translateX(-50%) rotate(2deg); }
}
.qb-ball:hover .qb-wrap::after, .qb-ball:focus-visible .qb-wrap::after { opacity: 1; }

/* ---------- Party teaser: perpetual slow drift, not a one-shot ---------- */

.party-teaser.in img {
  animation: teaser-drift 36s var(--ease-in-out) infinite alternate;
}
@keyframes teaser-drift {
  from { transform: scale(1.07) translateX(0); }
  to { transform: scale(1.07) translateX(-2.2%); }
}

/* ---------- Happenings: event cards + feed grid ---------- */

.event-list { display: grid; gap: 1rem; margin-bottom: 1.5rem; }
.event-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1.2rem, 3vw, 2.2rem);
  align-items: center;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.2rem, 2.5vw, 1.8rem) clamp(1.3rem, 3vw, 2.2rem);
  box-shadow: var(--inner-light), 0 10px 30px -22px rgba(30, 18, 8, 0.35);
}
.event-date {
  text-align: center;
  border-right: 1px solid var(--line-strong);
  padding-right: clamp(1.2rem, 3vw, 2.2rem);
  min-width: 4.6rem;
}
.event-date .ed-dow, .event-date .ed-mon {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.event-date .ed-num {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 2.6rem;
  font-weight: 440;
  line-height: 1.05;
  color: var(--acc);
}
.event-body h3 {
  font-size: 1.35rem;
  font-style: italic;
  font-weight: 440;
  margin: 0 0 0.2rem;
}
.event-time {
  display: inline-block;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.35rem;
}
.event-body p { margin: 0; color: var(--ink-2); font-size: 0.95rem; }

.feed-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.8rem;
}
.feed-grid a {
  position: relative;
  display: block;
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 1;
}
.feed-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease-out);
}
.feed-grid a::after {
  content: "↗";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 1.4rem;
  color: #f5edda;
  background: rgba(16, 10, 6, 0.42);
  opacity: 0;
  transition: opacity 0.35s;
}
.feed-grid a:hover::after { opacity: 1; }
.feed-grid a:hover img { transform: scale(1.07); }
@media (max-width: 64rem) { .feed-grid { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Employment: faces of the place + perk grid ---------- */

.perk-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.perk-strip img {
  border-radius: var(--radius);
  aspect-ratio: 4 / 3;
  object-fit: cover;
  width: 100%;
}
.perk-strip img:nth-child(2) { transform: translateY(1.2rem); }
.perk-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.4rem, 3vw, 2.4rem) clamp(1.8rem, 4vw, 3rem);
}
.perk { border-top: 2px solid var(--line); padding-top: 1rem; }
.perk-no {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.5rem;
  color: var(--gold);
  display: block;
  margin-bottom: 0.4rem;
}
.perk b {
  font-family: var(--font-display);
  font-weight: 520;
  font-size: 1.12rem;
  display: block;
  margin-bottom: 0.3rem;
}
.perk p { font-size: 0.94rem; color: var(--ink-2); margin: 0; }
@media (max-width: 44rem) {
  .perk-strip { grid-template-columns: 1fr; }
  .perk-strip img:nth-child(2) { transform: none; }
  .perk-grid { grid-template-columns: 1fr; }
}

/* ---------- Party page: the hero performs day-bright / disco-dark ---------- */

.hero-media-duo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-media-duo .duo-night { opacity: 0; transition: opacity 1.1s var(--ease-in-out); }
html[data-theme="night"] .hero-media-duo .duo-night { opacity: 1; }

/* ---------- Party page: offer cards point at the form ---------- */

.offer-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.9rem;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--acc);
  align-self: flex-start;
  border-bottom: 1px solid transparent;
  transition: gap 0.4s var(--ease-out), border-color 0.3s;
}
.offer-cta:hover { gap: 0.85rem; border-color: var(--acc); }

/* ---------- Party page: the ask sits beside the proof ---------- */

.inquiry-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: stretch;
  max-width: 72rem;
  margin-inline: auto;
}
.inquiry-grid .form-shell { max-width: none; margin: 0; }
.inquiry-figure {
  position: relative;
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  min-height: 26rem;
}
.inquiry-figure img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.inquiry-figure::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(200deg, transparent 45%, rgba(14, 9, 6, 0.78));
}
.inquiry-figure figcaption {
  position: absolute;
  z-index: 1;
  left: 1.5rem;
  right: 1.5rem;
  bottom: 1.4rem;
  color: #f5edda;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.45;
}
@media (max-width: 64rem) {
  .inquiry-grid { grid-template-columns: 1fr; }
  .inquiry-figure { min-height: 15rem; }
}

/* ---------- Party page: The Proof — two testimonials, two prints ----------
   The hosts' own words carry the section. Matt's Google review as a big
   typographic pull quote; Laura's message as the paper thank-you note it
   actually was (tape, tilt, handwriting-adjacent italic). Each row pairs
   words with one print — night beside the review, day beside the note —
   so the day//night thesis keeps running. */

.proof { overflow: hidden; }
.proof-spread {
  display: grid;
  grid-template-columns: 7fr 5fr;
  column-gap: clamp(2rem, 5vw, 4.5rem);
  row-gap: clamp(3rem, 6vw, 5rem);
  align-items: center;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.proof-quote, .proof-note { margin: 0; }
.proof-stars {
  margin: 0 0 1.1rem;
  color: var(--gold);
  font-size: 1.3rem;
  letter-spacing: 0.28em;
}
html[data-theme="night"] .proof-stars { text-shadow: 0 0 14px rgba(228, 183, 106, 0.4); }
.proof-words {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 380;
  font-size: clamp(1.45rem, 2.6vw, 2.15rem);
  line-height: 1.3;
  max-width: 21em;
}
.proof-words em { font-style: italic; color: var(--acc); }
.proof-meta {
  margin-top: 1.5rem;
  padding-top: 1rem;
  max-width: 26em;
  border-top: 1px solid color-mix(in srgb, currentColor 20%, transparent);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.proof-meta cite {
  font-style: normal;
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.proof-scores {
  font-size: 0.85rem;
  color: var(--ink-2);
  opacity: 0.85;
}

/* The prints: cream-bordered photos, slightly tilted — same language as the
   polaroid prints elsewhere on the site */
.proof-print {
  margin: 0;
  position: relative;
  justify-self: center;
  width: min(100%, 24rem);
  transform: rotate(2deg);
  transition: transform 0.7s var(--ease-out);
}
.proof-print.print-day { transform: rotate(-2deg); }
.proof-print:hover { transform: rotate(0.5deg) translateY(-6px); }
.proof-print.print-day:hover { transform: rotate(-0.5deg) translateY(-6px); }
.proof-print img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border: 6px solid #fdf6e9;
  box-shadow: 0 26px 50px -20px rgba(0, 0, 0, 0.55);
}
.proof-print figcaption {
  position: absolute;
  bottom: -1.9rem;
  left: 10%;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.05rem;
  transform: rotate(-2deg);
  opacity: 0.8;
}

/* The thank-you note: paper, tape, a hand that was clearly still buzzing */
.proof-note {
  position: relative;
  justify-self: center;
  width: min(100%, 30rem);
  background: #fdf6e9;
  color: #2b2015;
  padding: clamp(1.8rem, 3.5vw, 2.6rem) clamp(1.6rem, 3vw, 2.4rem) clamp(1.5rem, 3vw, 2.2rem);
  transform: rotate(-1.2deg);
  box-shadow: 0 24px 46px -18px rgba(0, 0, 0, 0.5);
  transition: transform 0.7s var(--ease-out);
}
.proof-note:hover { transform: rotate(-0.4deg) translateY(-5px); }
.proof-note::before {
  content: "";
  position: absolute;
  top: -0.85rem;
  left: 50%;
  width: 6.5rem;
  height: 1.7rem;
  transform: translateX(-50%) rotate(-2deg);
  background: rgba(228, 183, 106, 0.4);
  border-left: 1px dashed rgba(43, 32, 21, 0.18);
  border-right: 1px dashed rgba(43, 32, 21, 0.18);
}
.proof-note-hand {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 420;
  font-size: clamp(1.1rem, 1.7vw, 1.35rem);
  line-height: 1.5;
}
/* The signature stays in the hand — the annotation moves outside the paper */
.proof-note-sign {
  margin: 1.2rem 0 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 1.55rem;
  line-height: 1;
  transform: rotate(-2.5deg);
  color: rgba(43, 32, 21, 0.85);
}
.proof-note-caption {
  position: absolute;
  bottom: -2.15rem;
  left: 8%;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.05rem;
  transform: rotate(-2deg);
  opacity: 0.8;
  color: var(--ink);
  white-space: nowrap;
}
html[data-theme="night"] .proof-note {
  background: #f2e5cb;
  box-shadow: 0 28px 56px -18px rgba(0, 0, 0, 0.85);
}

/* Desktop: break the 2×2 — stagger the rows into a diagonal editorial flow.
   The night print drops below the quote's baseline, the day print rises to
   meet it, the note settles last. */
@media (min-width: 64.0625rem) {
  .proof-print.print-night { margin-top: 3.5rem; }
  .proof-print.print-day { margin-top: -4.5rem; }
  .proof-note { margin-top: 1.5rem; }
}

@media (max-width: 64rem) {
  .proof-spread {
    grid-template-columns: 1fr;
    row-gap: clamp(3.2rem, 7vw, 4rem);
  }
  /* words, print, print, note becomes words, print(night), print(day), note —
     keep the alternating rhythm on a single column */
  .proof-print { width: min(100%, 21rem); }
}

/* ---------- Menu page: sticky category chips + scroll spy ---------- */

/* The food section opens with the chip bar flush against the hero's edge */
.menu-food { padding-top: 0; padding-bottom: clamp(0.75rem, 2vw, 1.5rem); }
.menu-food > .container { padding-top: clamp(3.5rem, 7vw, 6rem); }
/* last section's own margin is plenty of gap before the full-bleed close band */
.menu-food > .container > .menu-section:last-child { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
/* Hidden at rest; slides in under the header once the menu content reaches
   it (class toggled in main.js). Fixed, so it occupies no layout at the top. */
.menu-chipnav {
  position: fixed;
  top: 4.6rem;
  left: 0;
  right: 0;
  z-index: 900;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  transform: translateY(-12px);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.35s var(--ease-out, ease), opacity 0.35s ease;
}
.menu-chipnav.show { transform: none; opacity: 1; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .menu-chipnav { transition: none; } }
.chipnav-inner {
  width: min(var(--container), 100% - var(--gutter) * 2);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
/* Persistent "you are here" menu label — pinned left, never scrolls with chips */
.chipnav-menu {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: inherit;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.45rem 0.95rem;
  border: 1px solid var(--acc);
  border-radius: 999px;
  background: transparent;
  color: var(--acc);
  cursor: pointer;
  transition: background-color 0.3s;
}
.chipnav-menu:hover { background: color-mix(in srgb, var(--acc) 12%, transparent); }
.chip-track {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding: 0.65rem 0;
  scrollbar-width: none;
}
.chip-track::-webkit-scrollbar { display: none; }
.chip-track a {
  flex: 0 0 auto;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.45rem 1.05rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--ink-2);
  transition: color 0.3s, border-color 0.3s, background-color 0.3s;
}
.chip-track a:hover { color: var(--ink); border-color: var(--ink); }
.chip-track a.active {
  background: var(--acc);
  border-color: var(--acc);
  color: #fdf8ee;
}
html[data-theme="night"] .chip-track a.active { color: #201205; }
/* Anchors need to clear header + chip bar on this page. #draft (the QR target)
   is a .menu-section[id], so the generic rule already covers it. */
.menu-section[id], #drinks { scroll-margin-top: 12rem; }
/* Mobile header is taller (44px theme toggle + padding), so the chip bar
   must stick lower or it tucks under the fixed header */
@media (max-width: 44rem) {
  .menu-chipnav { top: 4.65rem; }
  .menu-section[id], #drinks { scroll-margin-top: 12.5rem; }
}

/* ---------- Menu page: lunch / dinner state ---------- */

/* Generic lunch/dinner text swap — drives the hero title, the hero flip
   button and the sticky label. With no data-menu (JS off) both variants show
   (the noscript block hides the hero-title spans so it reads "The Menu"). */
html[data-menu="lunch"] [data-when="dinner"],
html[data-menu="dinner"] [data-when="lunch"] { display: none; }

/* Only the selected menu's sections and chips render; with no data-menu
   (JS off) both menus show, stacked. */
html[data-menu="lunch"] [data-menu-panel="dinner"],
html[data-menu="dinner"] [data-menu-panel="lunch"] { display: none; }
html[data-menu="lunch"] .chip-track a[data-menu="dinner"],
html[data-menu="dinner"] .chip-track a[data-menu="lunch"] { display: none; }

/* ---------- Menu page: wolf-pick rows get their moment ---------- */

.menu-item.wolf-pick {
  background: linear-gradient(90deg, color-mix(in srgb, var(--acc) 8%, transparent), transparent 72%);
  margin-inline: -1.1rem;
  padding-inline: 1.1rem;
  border-radius: 9px;
}

/* ---------- Menu page: dessert as a declaration ----------
   Section title sits centered like the rest; below it the one dessert
   goes two-up — photo on the left, the words on the right — so the
   copy reads at a glance without eating vertical space. */

.menu-solo-split {
  display: grid;
  grid-template-columns: clamp(11rem, 24vw, 15rem) 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  text-align: left;
  max-width: 46rem;
  margin: clamp(1.6rem, 3vw, 2.4rem) auto 0;
}
.menu-solo-body { min-width: 0; }
.menu-solo-line {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 380;
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  line-height: 1.2;
  margin: 0 0 1.4rem;
}
.menu-solo-line em { color: var(--acc); }
.menu-solo-item { margin: 0; }
.menu-solo-item .name {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.28rem;
  font-weight: 440;
}
.menu-solo-item .dot-sep { color: var(--gold); margin: 0 0.3rem; }
.menu-solo-item .price { font-family: var(--font-display); color: var(--gold); }
.menu-solo-src { font-size: var(--fs-small); color: var(--ink-2); font-style: italic; }
.menu-solo-photo { margin: 0; }
.menu-solo-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius);
}
@media (max-width: 44rem) {
  .menu-solo-split { grid-template-columns: 1fr; gap: 1.6rem; text-align: center; justify-items: center; max-width: 22rem; }
  .menu-solo-photo { max-width: 20rem; }
}

/* ---------- Menu page: On Draft ----------
   The rotating tap list — its own section (#draft), the last of the drinks run.
   Raised on --bg-elev so it lifts off the page ground in both themes, with a gold
   hairline set in from the border — Capitoline's answer to a framed tap board.
   Every colour is a token, so day and night need no separate rule. A QR code in
   the room points at #draft. */
.draft-board {
  position: relative;
  margin-top: clamp(2rem, 4vw, 3rem);
  padding: clamp(1.6rem, 3.2vw, 2.6rem) clamp(1.3rem, 3vw, 2.3rem) clamp(1.4rem, 2.6vw, 2rem);
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--inner-light), 0 8px 24px -16px rgba(30, 18, 8, 0.2);
}
.draft-board::after {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid color-mix(in srgb, var(--gold) 32%, transparent);
  border-radius: 9px;
  pointer-events: none;
}
/* .relic-label carries the gold tracked caps; this only adds the rule beneath.
   First group sits tight to the top of the board — the section title names it. */
.draft-group {
  margin: clamp(1.6rem, 2.6vw, 2.2rem) 0 0;
  padding-bottom: 0.45rem;
  border-bottom: 1px solid var(--line);
}
.draft-board > .draft-group:first-child { margin-top: 0; }
.draft-board .menu-cols { margin-top: 0.2rem; }
/* The global :last-child rule drops the final rule — in a two-column flow that
   reads as a ragged hole at the foot of column two, so put it back. */
.draft-board .menu-item:last-child { border-bottom: 1px solid var(--line); }

/* ---------- Menu page: draft list in two columns on desktop ---------- */

@media (min-width: 64rem) {
  .menu-cols { max-width: 60rem; }
  .menu-cols .menu-list { columns: 2; column-gap: 4rem; }
  .menu-cols .menu-item { break-inside: avoid; }
}

/* ---------- Menu page: closing full-bleed band ---------- */

.menu-close {
  position: relative;
  min-height: min(72svh, 40rem);
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #f5edda;
  text-align: center;
}
.menu-close img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.menu-close::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(75% 75% at 50% 55%, rgba(10, 6, 3, 0.24), rgba(10, 6, 3, 0.72));
}
.menu-close-inner {
  position: relative;
  z-index: 1;
  padding: clamp(4rem, 10vh, 7rem) var(--gutter);
  display: grid;
  gap: 1.8rem;
  justify-items: center;
}
.menu-close-inner::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: clamp(1rem, 4vh, 3rem) -8%;
  background: radial-gradient(74% 62% at 50% 50%, rgba(10, 6, 3, 0.74) 0%, rgba(10, 6, 3, 0.55) 55%, rgba(10, 6, 3, 0) 84%);
  pointer-events: none;
}
.menu-close .q-line {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 380;
  font-size: clamp(2rem, 5vw, 3.6rem);
  line-height: 1.12;
  text-shadow: 0 2px 30px rgba(10, 6, 3, 0.6);
}
.menu-close .q-line em { color: #e9a24e; }

/* ---------- The she-wolf, finally seen ----------
   Named in the copy everywhere; now she opens the footer — the real pink
   neon over the back bar, photographed. No frame and no floating
   rectangle: the shot runs edge to edge and the footer's darkness
   swallows every side of it, the wordmark rising out of the bottom
   scrim. Banked by day, full glow (with a neon flicker) at night. */

.footer-scene {
  position: relative;
  height: clamp(17rem, 40vw, 28rem);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  margin-bottom: clamp(2.6rem, 5vw, 4.5rem);
}
.footer-scene img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
  filter: brightness(0.78) saturate(0.85);
  transition: filter 0.8s;
}
html[data-theme="night"] .footer-scene img {
  filter: brightness(1) saturate(1.05);
  animation: wolf-neon 7s ease-in-out infinite;
}
/* The melt: footer color bleeds in from every edge so the photo has no
   corners to float on. */
.footer-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, var(--bg-footer), transparent 34%, transparent 52%, var(--bg-footer) 97%),
    linear-gradient(90deg, var(--bg-footer), transparent 24%, transparent 76%, var(--bg-footer));
  pointer-events: none;
}
.footer-scene .footer-wordmark {
  position: relative;
  z-index: 1;
  margin: 0 0 clamp(0.5rem, 1.6vw, 1.3rem);
}
/* Desktop only: the wordmark rides a touch too high over the photo. Drop it
   into the scrim below the image (overflow visible so the letters don't clip).
   Mobile placement is untouched. */
@media (min-width: 64rem) {
  .footer-scene { overflow: visible; }
  .footer-scene .footer-wordmark { transform: translateY(2.6rem); }
}
@keyframes wolf-neon {
  0%, 100% { opacity: 1; }
  6% { opacity: 0.86; }
  8% { opacity: 1; }
  52% { opacity: 0.95; }
  54% { opacity: 1; }
}

/* ---------- Discoball easter egg: one quiet wiggle when the footer arrives */

.discoball.hint { opacity: 0.85; }
.discoball.hint svg,
.discoball.hint .ball-orb { animation: ball-hint 2.4s var(--ease-in-out) 1; transform-origin: 50% 8%; }
@keyframes ball-hint {
  0%, 100% { transform: rotate(0); }
  18% { transform: rotate(-11deg); }
  42% { transform: rotate(8deg); }
  64% { transform: rotate(-5deg); }
  82% { transform: rotate(2.5deg); }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .hero [data-stagger] { opacity: 1; transform: none; }
  body::after { animation: none; }
}

/* ---------- Phone fixes: header fit + hero fit ----------
   Both scoped well below the desktop layout; desktop and tablet are untouched.

   1. Header. .brand was flex-shrink:0, which gave .header-inner a hard 376px
      minimum. Under that the bar overflowed its own fixed box and .nav-burger
      walked off the right edge — silently, because a position:fixed element
      produces no horizontal scrollbar. At 320px the menu was unreachable.

   2. Hero. .hero-content ran taller than .hero, and because .hero is
      `align-items: flex-end; overflow: hidden` the excess overflowed out the
      TOP and was clipped under the fixed header (eyebrow gone, title cut).
      Let the hero grow rather than clip, and reserve the header's height.
      This is inert wherever the copy already fits, so 390px+ phones are
      unchanged.

   3. Hero type, short screens only. .hero-title's clamp floor (3.1rem) binds
      on every viewport under ~435px, so the title never shrank on a phone.
      Keyed to viewport HEIGHT because that is what actually runs out — a
      390x844 phone has room, a 375x667 one does not. */

@media (max-width: 23.5rem) {
  .header-inner { gap: 0.7rem; }
  .brand { flex-shrink: 1; min-width: 0; }
  .brand-word {
    font-size: clamp(0.9rem, 3.9vw, 1.28rem);
    letter-spacing: 0.14em;
    white-space: nowrap;
  }
  .header-actions { gap: 0.4rem; flex-shrink: 0; }
}

@media (max-width: 44rem) {
  .hero {
    height: auto;
    min-height: 100svh;
    padding-top: calc(var(--header-h, 4.7rem) + 0.75rem);
  }
}

@media (max-width: 44rem) and (max-height: 46rem) {
  .hero .hero-title { font-size: clamp(1.9rem, 9.7vw, 3.1rem); }
  .hero .hero-content { padding-bottom: clamp(2.25rem, 6vh, 4rem); }
}