/* ---- It's Him — hero (placeholder theme) --------------------------------
   Palette + type are CSS variables so they swap in one place.
   Final: --font-display -> Canela, --font-label -> Söhne.
-------------------------------------------------------------------------- */
:root {
  --bg: #0E0908;          /* warm near-black            */
  --bg-0: rgba(14, 9, 8, 0);  /* transparent bg for feathers */
  --ink: #EFE7DC;         /* cream                      */
  --gold: #C79A54;
  --gold-bright: #E6C079;
  --wine: #5E2024;
  --muted: #9A8D7F;

  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;  /* slogans */
  --font-caps:    "Italiana", "Cormorant Garamond", Georgia, serif;          /* title caps */
  --font-script:  "Parisienne", "Snell Roundhand", cursive;                  /* cursive middle word */
  --font-body:    "Montserrat", "Helvetica Neue", Arial, sans-serif;         /* body · buttons · nav */
  --font-label:   "Montserrat", "Helvetica Neue", Arial, sans-serif;         /* legacy alias */

  /* ---- Vignette intensities (tune these single numbers) ----------------
     Higher = darker. These darken where the gloved hands/wrists enter
     (corners + side edges) while keeping the center column bright. */
  --veil-corner-top: 0.96;    /* top corners — wrists enter here      */
  --veil-corner-bottom: 0.90; /* bottom corners — hands at glass base */
  --veil-side: 0.82;          /* left/right edges                     */
  --veil-top-line: 0.55;      /* thin top edge (kept light for smoke) */
}

* { box-sizing: border-box; }

html { scroll-behavior: auto; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-label);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* ---- The pour canvas ---------------------------------------------------- */
#pour {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100svh;
  display: block;
  z-index: 0;
  opacity: 0;                      /* fades in on first drawn frame */
  transition: opacity 900ms ease;
}
#pour.is-ready { opacity: 1; }

/* ---- Feather + vignette ------------------------------------------------- */
.stage-veil {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    /* --- Heavy corner darkening: this is where the gloved wrists enter --- */
    radial-gradient(72% 60% at -6% -6%,  rgba(14,9,8,var(--veil-corner-top))    0%, var(--bg-0) 62%),
    radial-gradient(72% 60% at 106% -6%, rgba(14,9,8,var(--veil-corner-top))    0%, var(--bg-0) 62%),
    radial-gradient(66% 56% at -6% 106%, rgba(14,9,8,var(--veil-corner-bottom)) 0%, var(--bg-0) 60%),
    radial-gradient(66% 56% at 106% 106%,rgba(14,9,8,var(--veil-corner-bottom)) 0%, var(--bg-0) 60%),
    /* --- Bright vertical CENTER COLUMN: darken the left & right sides while
           a narrow transparent core keeps the glass, drink and rising smoke clear.
           The ellipse is taller than the viewport, so it darkens horizontally, not vertically. */
    radial-gradient(ellipse 42% 140% at 50% 50%,
      var(--bg-0) 36%,
      rgba(14,9,8,calc(var(--veil-side) * 0.65)) 72%,
      rgba(14,9,8,var(--veil-side)) 100%),
    /* --- Thin top edge only (kept light so center-top smoke survives) --- */
    linear-gradient(to bottom, rgba(14,9,8,var(--veil-top-line)) 0%, var(--bg-0) 13%),
    /* --- Soft bottom feather so the page bleeds away below --- */
    linear-gradient(to top, var(--bg) 0%, var(--bg-0) 24%);
}

/* ---- Boot ember (pre-first-frame) -------------------------------------- */
.boot {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  pointer-events: none;
  transition: opacity 700ms ease;
}
.boot.is-done { opacity: 0; }
.ember {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold-bright);
  box-shadow: 0 0 18px 6px rgba(230, 192, 121, 0.35);
  animation: emberPulse 1.9s ease-in-out infinite;
}
@keyframes emberPulse {
  0%, 100% { opacity: 0.25; transform: scale(0.8); }
  50%      { opacity: 1;    transform: scale(1.15); }
}

/* ---- Hero lockup -------------------------------------------------------- */
.lockup {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;                                /* each gap controlled explicitly via margins below */
  text-align: center;
  pointer-events: none;
  width: min(92vw, 640px);
  will-change: opacity, transform;
}
.lockup__mark {
  height: clamp(70px, 11vh, 118px);      /* ~2/3 the wordmark cap height — a subordinate crowning accent */
  width: auto;
  margin-bottom: clamp(27px, 4vh, 50px);  /* ~1/3 smaller gap so the smaller mark doesn't float */
  filter: drop-shadow(0 2px 24px rgba(0,0,0,0.55));
}
.lockup__wordmark {
  width: clamp(264px, 40.5vw, 418px);    /* a tad bigger */
  height: auto;
  filter: drop-shadow(0 2px 30px rgba(0,0,0,0.6));
}
.lockup__tagline {
  margin: clamp(4px, 0.8vh, 10px) 0 0;
  /* Move ONLY the slogan up toward the wordmark. Using transform (not margin) shifts just this
     element visually — the wordmark and the rest of the stack do NOT move or re-center. */
  transform: translateY(clamp(-18px, -1.8vh, -12px));
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(24px, 3.4vw, 38px);
  letter-spacing: 0.01em;
  color: var(--ink);
  text-shadow: 0 2px 26px rgba(0,0,0,0.7);
}
.lockup__story.link-underline {
  margin-top: clamp(9px, 1.5vh, 17px);  /* nudged ~5px up so it attaches to the slogan */
  font-weight: 500;                     /* clearly visible, doesn't blend in (beats .link-underline 300) */
  opacity: 0.9;                         /* was inheriting .link-underline 0.72 — lift it so it reads clearly */
  pointer-events: auto;                 /* lockup is pointer-events:none; re-enable the link */
  text-shadow: 0 1px 18px rgba(0,0,0,0.7);
}

/* ---- Scroll hint -------------------------------------------------------- */
.hint {
  position: fixed;
  left: 50%;
  bottom: clamp(22px, 4vh, 40px);
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  pointer-events: none;
}
.hint__label {
  font-family: var(--font-label);
  font-weight: 300;
  font-size: 11px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--muted);
  padding-left: 0.42em; /* optical balance for tracking */
}
.hint__line {
  position: relative;
  width: 1px;
  height: 46px;
  background: linear-gradient(to bottom, var(--muted), var(--bg-0));
  opacity: 0.5;
  overflow: hidden;
}
.hint__dot {
  position: absolute;
  top: 0; left: -1.5px;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--gold-bright);
  animation: hintFall 2.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes hintFall {
  0%   { transform: translateY(-6px); opacity: 0; }
  30%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translateY(46px); opacity: 0; }
}

/* ---- Scroll track ------------------------------------------------------- */
#scroll-track {
  position: relative;
  width: 1px;
  /* height set from CONFIG.SCROLL_HEIGHT_VH in hero.js */
}

/* ---- Dim overlay: turns the pour into a background under the sections ---- */
.dim-overlay {
  position: fixed;
  inset: 0;
  z-index: 2;
  background: var(--bg);
  opacity: 0;               /* driven by scroll in hero.js */
  pointer-events: none;
  will-change: opacity;
}

/* ---- Slim fixed top nav ------------------------------------------------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: 1fr auto 1fr;  /* brand | centred links | reservations */
  align-items: center;
  padding: clamp(15px, 2.4vh, 26px) clamp(20px, 4vw, 52px);
  pointer-events: none;                 /* only children are clickable */
  transition: transform 420ms cubic-bezier(0.4, 0, 0.2, 1), opacity 320ms ease;
  will-change: transform;
}
/* Hide-on-scroll: slides up + fades out when scrolling down (see hero.js) */
.nav--hidden {
  transform: translateY(-125%);
  opacity: 0;
  pointer-events: none;
}
.nav > * { pointer-events: auto; }
.nav__brand { justify-self: start; display: block; }
.nav__brand img {
  display: block;
  height: 48px; width: auto;
  opacity: 0.95;
  filter: drop-shadow(0 1px 12px rgba(0, 0, 0, 0.6));
}
.nav__links {
  justify-self: center;
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  gap: clamp(16px, 3vw, 44px);
}
.nav__links a {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  white-space: nowrap;                  /* nav labels never wrap to a second line */
  color: var(--ink);
  text-decoration: none;
  opacity: 0.82;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.6);
  transition: opacity 240ms ease, color 240ms ease;
}
.nav__links a:hover { opacity: 1; color: var(--gold-bright); }
.nav__reserve { justify-self: end; }

/* ---- Mobile menu: hamburger toggle (hidden on desktop) ----------------- */
.nav__toggle {
  justify-self: end;
  display: none;                 /* revealed ≤760px */
  width: 46px; height: 46px;
  margin: -8px -10px -8px 0;      /* nudge into the corner, keep 46px tap target */
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--ink);
  -webkit-tap-highlight-color: transparent;
}
.nav__toggle-bars {
  position: relative;
  display: block;
  width: 26px; height: 14px;
  margin: 0 auto;
}
.nav__toggle-bars i {
  position: absolute;
  left: 0; right: 0;
  height: 1.5px;
  background: var(--ink);
  border-radius: 2px;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
  transition: transform 340ms cubic-bezier(0.4, 0, 0.2, 1),
              opacity 200ms ease, background-color 240ms ease;
}
.nav__toggle-bars i:nth-child(1) { top: 0; }
.nav__toggle-bars i:nth-child(2) { top: 6px; }
.nav__toggle-bars i:nth-child(3) { top: 12px; }
/* Morph to an ✕ when the menu is open */
body.menu-open .nav__toggle-bars i { background: var(--gold-bright); }
body.menu-open .nav__toggle-bars i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.menu-open .nav__toggle-bars i:nth-child(2) { opacity: 0; }
body.menu-open .nav__toggle-bars i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---- Mobile menu: full-screen overlay ---------------------------------- */
.nav__overlay {
  position: fixed;
  inset: 0;
  z-index: 15;                    /* below the nav (20) so the ✕ + brand stay on top */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(80px, 16vh, 140px) 32px 48px;
  /* Warm near-black veil with a faint ember rising from below */
  background:
    radial-gradient(120% 80% at 50% 116%, rgba(199, 154, 84, 0.14) 0%, rgba(14, 9, 8, 0) 46%),
    rgba(11, 7, 6, 0.94);
  -webkit-backdrop-filter: blur(7px) saturate(105%);
  backdrop-filter: blur(7px) saturate(105%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 420ms ease, visibility 0s linear 420ms;
}
body.menu-open .nav__overlay {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 420ms ease, visibility 0s;
}
.nav__menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(22px, 4.4vh, 40px);
  text-align: center;
}
.nav__menu a:not(.nav__menu-reserve) {
  font-family: var(--font-caps);
  font-size: clamp(30px, 8.5vw, 46px);
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  opacity: 0.9;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.7);
  transition: color 260ms ease, opacity 260ms ease;
}
.nav__menu a:not(.nav__menu-reserve):hover,
.nav__menu a:not(.nav__menu-reserve):active,
.nav__menu a[aria-current="page"] { color: var(--gold-bright); opacity: 1; }
/* Hairline + Reservations pill sit a touch apart from the links */
.nav__menu-reserve {
  margin-top: clamp(10px, 2vh, 20px);
  padding: 15px 40px;
  font-size: 12px;
  letter-spacing: 0.24em;
}
.nav__menu-reserve::before {
  content: "";
  position: absolute;
  top: calc(-1 * clamp(16px, 3vh, 28px));
  left: 50%;
  width: 46px; height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(199, 154, 84, 0.55), transparent);
}
.nav__menu-reserve { position: relative; }
/* Staggered fade-up of the links as the overlay opens */
.nav__menu > * {
  opacity: 0;
  transform: translateY(14px);
}
body.menu-open .nav__menu > * {
  animation: navMenuRise 560ms cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}
body.menu-open .nav__menu > *:nth-child(1) { animation-delay: 90ms; }
body.menu-open .nav__menu > *:nth-child(2) { animation-delay: 150ms; }
body.menu-open .nav__menu > *:nth-child(3) { animation-delay: 210ms; }
body.menu-open .nav__menu > *:nth-child(4) { animation-delay: 270ms; }
body.menu-open .nav__menu > *:nth-child(5) { animation-delay: 330ms; }
body.menu-open .nav__menu > *:nth-child(6) { animation-delay: 410ms; }
@keyframes navMenuRise {
  to { opacity: 1; transform: translateY(0); }
}

/* ---- Shared gold-fill pill (primary action: Reservations, Reserve a Table) ---- */
.btn-gold {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 26px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--bg);
  text-decoration: none;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  border: 1px solid var(--gold-bright);
  border-radius: 999px;
  box-shadow: 0 6px 26px rgba(199, 154, 84, 0.28);
  transition: transform 220ms ease, box-shadow 220ms ease, filter 220ms ease;
}
.btn-gold:hover { transform: translateY(-1px); filter: brightness(1.06); box-shadow: 0 10px 32px rgba(199, 154, 84, 0.42); }

/* ---- Understated underline link (Our Story · Book a meeting room · Contact Us) ---- */
.link-underline {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 12.5px;
  letter-spacing: 0.14em;
  color: var(--ink);
  text-decoration: none;
  opacity: 0.72;
  padding-bottom: 3px;
  border-bottom: 1px solid rgba(239, 231, 220, 0.4);
  transition: opacity 220ms ease, border-color 220ms ease, color 220ms ease;
}
.link-underline:hover { opacity: 1; color: var(--gold-bright); border-color: var(--gold-bright); }

/* ---- Homepage sections (editorial · scroll-animated) ------------------- */
.panels {
  position: relative;
  z-index: 5;                            /* above the dimmed pour background */
}
.panel {
  position: relative;
  min-height: 72vh;                      /* significantly tightened — you see the next section begin
                                            before fully leaving the current one (continuous flow) */
  display: flex;
  padding: clamp(44px, 5.5vh, 84px) clamp(30px, 8vw, 128px);
  scroll-margin-top: 84px;
  overflow: clip;                        /* media slides in FROM the edge; no page overflow */
}

/* --- Text block --- */
.panel__inner {
  position: relative;
  z-index: 3;                            /* text layers OVER the image */
  max-width: min(82vw, 900px);           /* wide, so the big title reaches onto the image */
  display: flex;
  flex-direction: column;
  gap: clamp(13px, 1.9vh, 22px);
  will-change: transform, opacity, filter;
}
/* Section identity — "THE [caps · Italiana] [cursive · Parisienne] [caps · Italiana]".
   Kept on one line (nowrap) so it extends across and overlaps onto the image. */
.panel__name {
  margin: 0;
  font-family: var(--font-caps);
  font-weight: 400;
  font-size: clamp(28px, 4.7vw, 62px);   /* moderately reduced — prominent, not dominating */
  line-height: 0.94;
  white-space: nowrap;
  color: var(--ink);
  text-shadow: 0 6px 38px rgba(0, 0, 0, 0.9), 0 2px 10px rgba(0, 0, 0, 0.75);
}
.panel__name .t-the,
.panel__name .t-cap {
  font-family: var(--font-caps);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.panel__name .t-script {
  font-family: var(--font-script);
  font-size: 1.5em;                      /* the cursive word reads larger */
  text-transform: none;
  letter-spacing: 0.005em;
  color: var(--ink);
  padding: 0 0.06em;
}
/* Emotional tagline under the name */
.panel__slogan {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(23px, 3.3vw, 42px);
  line-height: 1.02;
  color: var(--gold-bright);
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.8);
}
.panel__desc {
  margin: 0;
  max-width: 42ch;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(14px, 1.15vw, 16px);
  line-height: 1.75;
  letter-spacing: 0.02em;
  color: var(--muted);
  text-shadow: 0 1px 26px rgba(0, 0, 0, 0.85);
}

/* --- Section CTA — outline rounded pill (secondary hierarchy) --- */
.panel__cta {
  align-self: flex-start;
  margin-top: clamp(12px, 2vh, 26px);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 30px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  background: rgba(199, 154, 84, 0.06);
  border: 1px solid rgba(199, 154, 84, 0.55);
  border-radius: 999px;
  backdrop-filter: blur(2px);
  transition: background 260ms ease, color 260ms ease, border-color 260ms ease;
}
.panel__cta::after {
  content: "\2192";                       /* → */
  font-size: 15px;
  transition: transform 260ms ease;
}
.panel__cta:hover { background: var(--gold); color: var(--bg); border-color: var(--gold); }
.panel__cta:hover::after { transform: translateX(5px); }

/* Gold-fill primary pill (Reserve a Table) — reuses the shared .btn-gold look */
.panel__cta--gold {
  color: var(--bg);
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  border-color: var(--gold-bright);
  box-shadow: 0 6px 26px rgba(199, 154, 84, 0.28);
}
.panel__cta--gold:hover {
  color: var(--bg);
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  border-color: var(--gold-bright);
  filter: brightness(1.06);
}

/* Secondary underline link sitting beneath a CTA (e.g. Book a meeting room).
   align-self keeps it hugging its text (flex blockifies inline-block children). */
.panel__link { align-self: flex-start; margin-top: clamp(14px, 1.8vh, 20px); font-weight: 500; }
.panel__link::after { content: " \2192"; white-space: pre; }
.panel--events .panel__link,
.panel--menu .panel__link { align-self: flex-end; }

/* --- Media: absolute, large, bleeding for a cinematic layered feel --- */
.panel__media {
  position: absolute;
  margin: 0;
  z-index: 1;
  pointer-events: none;
  line-height: 0;
  will-change: transform, opacity;
}
.panel__media img { display: block; width: auto; height: auto; }

/* Cutout PNGs — soften the silhouette so it isn't a crisp pasted outline:
   a hair of blur + a tight dark halo blends the edge into the shadow. */
.panel__media--cutout img {
  filter: blur(0.5px) drop-shadow(0 0 16px rgba(14, 9, 8, 0.92)) drop-shadow(0 30px 66px rgba(0, 0, 0, 0.5));
}
/* Membership: transparent sides already; just dissolve the feet into shadow (heads stay) */
.panel--membership .panel__media--cutout img {
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 79%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 79%, transparent 100%);
}
/* Coffee: scene fills the frame — feather ALL edges HEAVILY, and fade out the whole
   lower half so the bottom fully dissolves into the dark (no hard cutoff line). */
.panel--coffee .panel__media--cutout img {
  -webkit-mask-image:
    linear-gradient(to right,  transparent 0%, #000 20%, #000 80%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 22%, #000 48%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right,  transparent 0%, #000 20%, #000 80%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 22%, #000 48%, transparent 100%);
  mask-composite: intersect;
}
/* Rectangular venue photo — heavy feather on ALL edges so it fully dissolves */
.panel__media--feather img {
  -webkit-mask-image:
    linear-gradient(to right,  transparent 0%, #000 28%, #000 72%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 21%, #000 79%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right,  transparent 0%, #000 28%, #000 72%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 21%, #000 79%, transparent 100%);
  mask-composite: intersect;
}

/* --- Per-section composition: each its own moment --- */

/* MEMBERSHIP — image ANCHORED LEFT; text overlaps its right (inner) end and extends
   rightward; the right side stays open for the smoke. */
.panel--membership {
  align-items: center; justify-content: flex-start;
  margin-bottom: -11vh;                  /* pulls Private Affair up into view sooner — tightens ONLY
                                            the Members→Events gap; men keep full size, other gaps unchanged */
}
.panel--membership .panel__inner { margin-left: clamp(20px, 12vw, 210px); }  /* text overlaps onto the men (matches Events) */
.panel--membership .panel__media { left: clamp(-40px, -2vw, 0px); bottom: 0; }
.panel--membership .panel__media img { height: 70vh; width: auto; }  /* full-size men (unchanged) */

/* EVENTS — MIRROR: image ANCHORED RIGHT; text overlaps its left (inner) end and extends
   leftward; the left side stays open for the smoke. */
.panel--events {
  align-items: center; justify-content: flex-end;
  margin-bottom: -12vh;                  /* pulls Daytime up into the empty band below — condenses the
                                            Events→Daytime gap (same technique as Members Club) */
}
.panel--events .panel__inner { text-align: right; align-items: flex-end; margin-right: clamp(20px, 17vw, 290px); }  /* moderate overlap onto the venue picture's left edge */
.panel--events .panel__cta { align-self: flex-end; }
.panel--events .panel__media { right: clamp(-40px, -2vw, 0px); top: 50%; transform: translateY(-50%); }
.panel--events .panel__media img { height: 82vh; width: auto; }  /* centered + feathered; slight bleed past the shorter panel is fine */

/* COFFEE — image ANCHORED LEFT (like membership); text overlaps its right end */
.panel--coffee {
  align-items: center; justify-content: flex-start;
  margin-bottom: -12vh;                  /* pulls Reservation up into the empty band below — condenses the
                                            Daytime→Reservation gap (same technique as Members Club) */
}
.panel--coffee .panel__inner { margin-left: clamp(20px, 14vw, 240px); }  /* text overlaps onto the image's inner edge (matches Events); still right of the bright iPad */
.panel--coffee .panel__media { left: clamp(-40px, -2vw, 0px); bottom: 2vh; }  /* within the panel; heavy feather handles the fade */
.panel--coffee .panel__media img { height: 68vh; width: auto; }

/* RESERVATION — MIRROR of events: image ANCHORED RIGHT, text overlaps its left (inner) edge */
.panel--menu { align-items: center; justify-content: flex-end; }
.panel--menu .panel__inner { text-align: right; align-items: flex-end; margin-right: clamp(20px, 24vw, 400px); max-width: 620px; }
.panel--menu .panel__cta { align-self: flex-end; }
.panel--menu .panel__media { right: clamp(-40px, -2vw, 0px); top: 50%; transform: translateY(-50%); }
.panel--menu .panel__media img { height: 82vh; width: auto; }

/* --- Scroll-driven entrance: content materialises out of the smoke,
       settles while it's in view, then drifts + fades as you scroll past. --- */
/* Content reaches full opacity EARLY (~22% of transit) and HOLDS it until ~88%, so an
   incoming section is already visible while the outgoing one is still visible — they
   cross-fade continuously instead of leaving an invisible gap ("dead space") between them.
   Only a short materialise (rise + de-blur) at the very start and a gentle drift-out at the end. */
@keyframes cx-text {
  0%   { opacity: 0; transform: translateY(64px);  filter: blur(6px); animation-timing-function: cubic-bezier(0.16, 0.84, 0.24, 1); }
  22%  { opacity: 1; transform: translateY(0);      filter: blur(0); }
  88%  { opacity: 1; transform: translateY(0);      filter: blur(0); animation-timing-function: cubic-bezier(0.6, 0, 0.85, 0.35); }
  100% { opacity: 0; transform: translateY(-34px);  filter: blur(3px); }
}
/* Image fades + emerges into the frame from its anchored edge (clear, noticeable). */
@keyframes cx-media-fromleft {   /* image anchored LEFT (membership, coffee) */
  0%   { opacity: 0; transform: translateX(-84px) scale(1.06); animation-timing-function: cubic-bezier(0.16, 0.84, 0.24, 1); }
  22%  { opacity: 1; transform: translateX(0)     scale(1); }
  88%  { opacity: 1; transform: translateX(0)     scale(1); animation-timing-function: cubic-bezier(0.6, 0, 0.85, 0.35); }
  100% { opacity: 0; transform: translateX(40px)  scale(1.02); }
}
@keyframes cx-media-fromright {  /* image anchored RIGHT (events); keeps -50% Y centring */
  0%   { opacity: 0; transform: translate(84px, -50%) scale(1.06); animation-timing-function: cubic-bezier(0.16, 0.84, 0.24, 1); }
  22%  { opacity: 1; transform: translate(0, -50%)     scale(1); }
  88%  { opacity: 1; transform: translate(0, -50%)     scale(1); animation-timing-function: cubic-bezier(0.6, 0, 0.85, 0.35); }
  100% { opacity: 0; transform: translate(-40px, -50%) scale(1.02); }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .panel__inner { animation: cx-text both; animation-timeline: view(); animation-range: cover; }
    .panel--membership .panel__media { animation: cx-media-fromleft  both; animation-timeline: view(); animation-range: cover; }
    .panel--coffee     .panel__media { animation: cx-media-fromleft  both; animation-timeline: view(); animation-range: cover; }
    .panel--events     .panel__media { animation: cx-media-fromright both; animation-timeline: view(); animation-range: cover; }
    .panel--menu    .panel__media { animation: cx-media-fromright both; animation-timeline: view(); animation-range: cover; }
  }
}

/* ---- Footer — clean, solid dark close to the page, above the fixed pour ----- */
.footer {
  position: relative;
  z-index: 5;
  background: var(--bg);
  border-top: 1px solid rgba(199, 154, 84, 0.18);
  padding: clamp(52px, 8vh, 96px) clamp(28px, 8vw, 128px) clamp(28px, 4vh, 44px);
}
.footer__inner {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(34px, 5vw, 72px);
}
.footer__col { display: flex; flex-direction: column; min-width: 0; }

/* Small gold section labels (THE APP · COFFEE · COCKTAILS · VISIT · CONTACT) */
.footer__label {
  margin: 0 0 clamp(14px, 1.8vh, 20px);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-bright);
}
.footer__label--spaced { margin-top: clamp(24px, 3.4vh, 38px); }
.footer__note {
  font-weight: 300;
  letter-spacing: 0.12em;
  text-transform: none;
  color: var(--muted);
}

/* Hours: day on the left, time on the right */
.footer__hours { margin: 0; display: flex; flex-direction: column; gap: 7px; }
.footer__hrow {
  display: flex;
  justify-content: space-between;
  gap: clamp(18px, 2.4vw, 40px);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 14px;
  letter-spacing: 0.02em;
  line-height: 1.5;
}
.footer__hrow dt { color: var(--muted); }
.footer__hrow dd { margin: 0; color: var(--ink); white-space: nowrap; }

/* Address + contact lines */
.footer__addr,
.footer__contact {
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 300;
  font-size: 14px;
  line-height: 1.7;
  letter-spacing: 0.03em;
  color: var(--ink);
}
.footer__contact { display: block; text-decoration: none; transition: color 200ms ease; }
.footer__contact:hover { color: var(--gold-bright); }

/* Apple App Store badge (self-contained; Apple only for now) */
.appstore {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 9px 18px;
  background: #000;
  border: 1px solid rgba(239, 231, 220, 0.34);
  border-radius: 12px;
  text-decoration: none;
  color: var(--ink);
  transition: border-color 220ms ease, transform 220ms ease;
}
.appstore:hover { border-color: rgba(239, 231, 220, 0.7); transform: translateY(-1px); }
.appstore__logo { width: 24px; height: auto; fill: var(--ink); flex: none; }
.appstore__text { display: flex; flex-direction: column; line-height: 1.06; }
.appstore__small { font-family: var(--font-body); font-weight: 300; font-size: 10px; letter-spacing: 0.03em; opacity: 0.9; }
.appstore__big   { font-family: var(--font-body); font-weight: 400; font-size: 18px; letter-spacing: 0.01em; }
.footer__legal {
  max-width: 1180px;
  margin: clamp(40px, 6vh, 68px) auto 0;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--muted);
  opacity: 0.58;
}

/* --- Narrower screens: the overlap would bury the image, so STACK cleanly instead
       (text on top, image below at a readable size, no overlap). Applies to phones and
       portrait tablets; the layered overlap is a wide-screen treatment only. --- */
@media (max-width: 960px) {
  .panel { flex-direction: column; justify-content: center; align-items: flex-start;
           padding: clamp(116px, 16vh, 164px) clamp(26px, 7vw, 60px) clamp(72px, 12vh, 120px); }
  /* Picture on top, text below — and the text tucks up under the photo's feathered
     base (negative top margin) so the two read as one connected composition. */
  .panel__media {
    position: relative !important; inset: auto !important; transform: none !important;
    order: 1; align-self: center; margin: 0 auto !important; animation: none !important;
  }
  .panel__media img { height: auto !important; width: min(82vw, 380px) !important; max-width: 82vw !important; }
  .panel__inner {
    order: 2;
    max-width: 100%;
    margin: clamp(-72px, -9vh, -44px) 0 0 !important;   /* overlap the photo's soft bottom edge */
    animation: none !important;
  }
  /* Perf: the desktop cutout filter (blur + a 66px-radius drop-shadow) is a costly raster on
     mobile GPUs. Reduce to one modest shadow — cheaper first paint, negligible visual change. */
  .panel__media--cutout img { filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.5)) !important; }
  .panel__name { font-size: clamp(30px, 9vw, 52px); white-space: normal; line-height: 1.05; }
  .panel--events, .panel--events .panel__inner { align-items: flex-start; text-align: left; }
  .panel--events .panel__cta { align-self: flex-start; }
  .panel--menu, .panel--menu .panel__inner { align-items: center; text-align: center; }
  .panel--menu .panel__cta { align-self: center; }

  /* Footer stacks and centres */
  .footer__inner { flex-direction: column; align-items: flex-start; gap: clamp(28px, 5vh, 42px); }
  .footer__label--spaced { margin-top: clamp(20px, 3vh, 30px); }
}

/* Tight band just above the mobile breakpoint (portrait tablets / large phones
   in landscape): with five links plus the longer "It's Our Story" label set to
   nowrap, the default size/spacing would overflow. Scale the links, tighten the
   gap, and trim the bar padding so everything fits on one line with no wrap and
   no horizontal overflow, right down to 761px where the hamburger takes over. */
@media (min-width: 761px) and (max-width: 1040px) {
  .nav { padding-left: clamp(12px, 1.7vw, 28px); padding-right: clamp(12px, 1.7vw, 28px); }
  .nav__links { gap: clamp(8px, 1.2vw, 20px); }
  .nav__links a { font-size: 11px; letter-spacing: 0.06em; }
}

/* Small screens: the centred desktop links give way to a hamburger that opens
   the full-screen overlay menu (see .nav__overlay). Brand left · Reservations
   pill · burger, right. */
@media (max-width: 760px) {
  .nav { grid-template-columns: 1fr auto auto; column-gap: 14px; }
  .nav__links { display: none; }
  .nav__reserve { padding: 10px 20px; font-size: 11px; transition: opacity 240ms ease; }
  .nav__toggle { display: block; }
  /* When the menu is open, the top-bar pill would duplicate the one inside the
     overlay — fade it out and hand the CTA to the overlay. */
  body.menu-open .nav__reserve { opacity: 0; pointer-events: none; }
  /* Freeze the page behind the overlay. */
  body.menu-open { overflow: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  .ember, .hint__dot { animation: none; }
  /* Mobile menu: reveal instantly, no rise/blur theatrics */
  .nav__overlay { transition: opacity 1ms linear, visibility 0s; }
  .nav__menu > * { opacity: 1; transform: none; }
  body.menu-open .nav__menu > * { animation: none; }
  .nav__toggle-bars i { transition: background-color 240ms ease; }
}