/* ==========================================================================
   IT'S HIM — EVENTS  ("The Private Affair")
   A visual pitch deck for private events + catering, built to feel like you
   WALK THROUGH the space: Hero → The Lounge (upstairs) → The Den (downstairs)
   → Catering & Drink Packages → Closing. Layered on top of styles.css (palette,
   type system, nav, footer, .panel__cta outline pill, .btn-gold, .appstore) and
   the reusable ambient background (ambient.css / ambient.js) — the SAME dark,
   candlelit atmosphere used on the homepage and membership page.

   Each chapter is a tall "stage": feathered photos are placed on staggered
   vertical bands so the eye travels DOWN through the room (a spatial journey,
   not a grid). Copy lives in its own clear zone with a soft scrim — photos sit
   BEHIND the text (z-index) and are feathered, so nothing ever covers a word.

   ── WALK-THROUGH MOTION HOOK (added later, no rebuild) ─────────────────────
   Every photo is a `.ev-photo` inside a chapter `.ev-stage`, carries a
   `data-depth` (0 = far wall … 1 = closest to camera) and its own transform/
   opacity budget (will-change set). A later parallax / 3D "walking through the
   room" layer can read data-depth and translate each photo on scroll WITHOUT
   touching this structure. Do not remove the stage/photo/data-depth contract.
   ========================================================================== */

.events-page { background: var(--bg); }

/* ---- Shared small tracked label above titles (matches membership) -------- */
.eyebrow {
  margin: 0 0 clamp(10px, 1.6vh, 18px);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--gold);
  padding-left: 0.42em;
}

/* ==========================================================================
   Shared type — same faces as the homepage / membership lockups.
   THE·[script]·CAP :  .t-the / .t-cap = Italiana caps · .t-script = Parisienne
   ========================================================================== */
.ev-name {
  margin: 0;
  font-family: var(--font-caps);
  font-weight: 400;
  font-size: clamp(34px, 5.4vw, 76px);
  line-height: 0.96;
  white-space: nowrap;
  color: var(--ink);
  text-shadow: 0 6px 38px rgba(0,0,0,0.95), 0 2px 10px rgba(0,0,0,0.8);
}
.ev-name .t-the, .ev-name .t-cap {
  font-family: var(--font-caps);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.ev-name .t-script {
  font-family: var(--font-script);
  font-size: 1.52em;
  text-transform: none;
  letter-spacing: 0.005em;
  padding: 0 0.06em;
  color: var(--ink);
}
.ev-slogan {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(22px, 3.2vw, 40px);
  line-height: 1.04;
  color: var(--gold-bright);
  text-shadow: 0 2px 30px rgba(0,0,0,0.85);
}
.ev-desc {
  margin: 0;
  max-width: 42ch;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(14px, 1.15vw, 16px);
  line-height: 1.78;
  letter-spacing: 0.02em;
  color: var(--muted);
  text-shadow: 0 1px 26px rgba(0,0,0,0.9);
}
.ev-desc strong { color: var(--ink); font-weight: 600; }

/* Chapter marker line ("Chapter Two · Downstairs") */
.ev-chapter-id {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(12px, 1.1vw, 14px);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--muted);
  text-shadow: 0 1px 16px rgba(0,0,0,0.85);
}
.ev-chapter-id .sep { color: rgba(199,154,84,0.6); margin: 0 0.4em; }
.ev-rule {
  display: block;
  width: clamp(120px, 22vw, 260px);
  height: 1px;
  margin: clamp(6px, 1vh, 12px) 0;
  background: rgba(199,154,84,0.42);
}

/* Soft legibility scrim behind every copy block — a wide, fully-feathered
   radial that darkens the frame behind the text so it never reads as a box. */
.ev-copy { position: relative; }
.ev-copy::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -22% -26%;
  pointer-events: none;
  background: radial-gradient(ellipse at center,
    rgba(14,9,8,0.8) 0%, rgba(14,9,8,0.52) 46%, var(--bg-0) 76%);
}

/* ==========================================================================
   FEATHERING — every photo dissolves into the dark ambient, never a hard
   rectangle. Landscapes get the radial+linear "melt all edges" treatment;
   portraits get a single soft ellipse (no straight-line edge anywhere).
   ========================================================================== */
.ev-photo { position: absolute; z-index: 1; margin: 0; pointer-events: none; line-height: 0; will-change: transform, opacity; }
.ev-photo img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 46%;
  filter: brightness(0.9) saturate(1.06) contrast(1.06) drop-shadow(0 30px 64px rgba(0,0,0,0.55));
}
/* Landscape frames — radial melts the corners, two linears keep each edge soft. */
.ev-photo--land img {
  -webkit-mask-image:
    radial-gradient(72% 68% at 50% 48%, #000 26%, rgba(0,0,0,0.35) 62%, transparent 90%),
    linear-gradient(to right,  transparent 0%, #000 22%, #000 78%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 18%, #000 82%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    radial-gradient(72% 68% at 50% 48%, #000 26%, rgba(0,0,0,0.35) 62%, transparent 90%),
    linear-gradient(to right,  transparent 0%, #000 22%, #000 78%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 18%, #000 82%, transparent 100%);
  mask-composite: intersect;
}
/* Portrait frames — one soft vertical ellipse; dissolves on every side, no edge. */
.ev-photo--port img {
  -webkit-mask-image: radial-gradient(58% 60% at 50% 48%, #000 0%, #000 34%, rgba(0,0,0,0.32) 62%, transparent 84%);
  mask-image: radial-gradient(58% 60% at 50% 48%, #000 0%, #000 34%, rgba(0,0,0,0.32) 62%, transparent 84%);
}

/* ==========================================================================
   The page container
   ========================================================================== */
.affair { position: relative; z-index: 5; }

/* Buttons: reuse the homepage's outline pill (.panel__cta) — it already carries
   the → arrow. A light wrapper just controls its placement per section. */
.ev-actions { margin-top: clamp(16px, 2.6vh, 30px); display: flex; }
.ev-chapter--den .ev-actions,
.ev-chapter--den .ev-copy { align-items: flex-end; }

/* ==========================================================================
   HERO — "The Private Affair": a centred opening moment. A wide, moody space
   photo fills the hero as a feathered, darkened backdrop; all copy centred over
   it. Bookends with the centred closing CTA at the bottom.
   ========================================================================== */
.ev-hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(96px, 14vh, 160px) clamp(28px, 8vw, 128px);
  overflow: clip;
}
.ev-hero__media {
  position: absolute;
  left: 50%; top: 49%;
  transform: translate(-50%, -50%);
  width: auto; height: auto;
  z-index: 1;
  margin: 0; line-height: 0; pointer-events: none;
}
.ev-hero__media img {
  width: clamp(620px, 88vw, 1440px);
  aspect-ratio: 1.62 / 1;
  height: auto;
  object-fit: cover;
  object-position: 50% 44%;
  filter: brightness(0.82) saturate(0.98) contrast(1.06);
  -webkit-mask-image:
    radial-gradient(84% 84% at 50% 42%, #000 40%, rgba(0,0,0,0.34) 74%, transparent 100%),
    linear-gradient(to right,  transparent 0%, #000 14%, #000 86%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 14%, #000 76%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    radial-gradient(84% 84% at 50% 42%, #000 40%, rgba(0,0,0,0.34) 74%, transparent 100%),
    linear-gradient(to right,  transparent 0%, #000 14%, #000 86%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 14%, #000 76%, transparent 100%);
  mask-composite: intersect;
}
.ev-hero__inner {
  position: relative;
  z-index: 3;
  max-width: min(94vw, 820px);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(14px, 2vh, 24px);
}
.ev-hero__inner::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -20% -26%;
  pointer-events: none;
  background: radial-gradient(ellipse at center,
    rgba(14,9,8,0.8) 0%, rgba(14,9,8,0.5) 48%, var(--bg-0) 78%);
}
/* Hero + closing eyebrows enlarged to the same, matched scale (was ~13px / 11px). */
.ev-hero__inner .eyebrow,
.ev-close__inner .eyebrow { font-size: clamp(14px, 1.45vw, 17px); }
.ev-hero__inner .eyebrow { padding-left: 0; }
.ev-title {
  margin: 0;
  font-family: var(--font-caps);
  font-weight: 400;
  font-size: clamp(42px, 7.4vw, 104px);
  line-height: 0.92;
  white-space: nowrap;
  color: var(--ink);
  text-shadow: 0 6px 44px rgba(0,0,0,0.95);
}
.ev-title .t-the, .ev-title .t-cap {
  font-family: var(--font-caps); text-transform: uppercase; letter-spacing: 0.05em;
}
.ev-title .t-script {
  font-family: var(--font-script); font-size: 1.36em; text-transform: none; padding: 0 0.04em;
  color: var(--ink);
}
.ev-hero__slogan { font-size: clamp(23px, 3.4vw, 44px); }
.ev-hero__intro { max-width: 46ch; }

/* scroll cue — "enter" */
.ev-cue {
  margin-top: clamp(10px, 2vh, 22px);
  position: relative;
  top: clamp(70px, 12vh, 130px);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.ev-cue > span:first-child {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 11px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--muted);
  padding-left: 0.42em;
  transition: color 240ms ease;
}
.ev-cue:hover > span:first-child { color: var(--gold-bright); }
.ev-cue__line {
  position: relative;
  width: 1px; height: 46px;
  background: linear-gradient(to bottom, var(--muted), var(--bg-0));
  opacity: 0.5; overflow: hidden;
}
.ev-cue__dot {
  position: absolute; top: 0; left: -1.5px;
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--gold-bright);
  animation: cueFall 2.4s cubic-bezier(0.4,0,0.2,1) infinite;
}
@keyframes cueFall {
  0% { transform: translateY(-6px); opacity: 0; }
  30% { opacity: 1; } 80% { opacity: 1; }
  100% { transform: translateY(46px); opacity: 0; }
}

/* ==========================================================================
   CHAPTERS — each is a tall STAGE. Copy occupies a clear band; feathered photos
   are placed on staggered vertical bands so the eye walks DOWN through the room.
   ========================================================================== */
.ev-chapter {
  position: relative;
  overflow: clip;
  padding: 0 clamp(24px, 5vw, 92px);
}
.ev-stage { position: absolute; inset: 0; z-index: 1; }

/* Copy block: absolutely placed in its own clear zone (never behind a photo). */
.ev-copy {
  position: absolute;
  z-index: 3;
  max-width: min(90vw, 32rem);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(10px, 1.5vh, 18px);
}

/* ---- THE LOUNGE — a cinematic walk-through: the five photos OVERLAP DEEPLY and
   cross-fade into ONE cohesive collage that fills the section (bar top-right → stools
   spine → banquette → chairs → lamp). They are sized/placed to overlap generously; the
   feathering (below) blends the overlaps so there are no seams. Copy is unchanged. */
/* Only TWO photos remain: HERO BAR (upper-right) + the GREEN-ROOM/LAMP unit (risen up,
   fading at the bottom). img_0067 (stools/middle) and img_0071 (red chairs) were removed. */
/* Section height tracks the vw-sized room unit (max with a vh floor) so the unit's
   feathered bottom lands just above the section bottom at every width — no clip, no big void. */
/* Section height tracks the actual (vw-sized) room unit so its feathered bottom lands just
   above the section bottom at every width — no clip, no big void. */
/* Section height tracks the actual (vw-sized) room unit so its feathered bottom lands ~55px
   above the section bottom at every width — no clip, no big void. */
.ev-chapter--lounge { min-height: max(108vh, calc(540px + 8.5vw + clamp(330px, 35vw, 560px))); }
.ev-chapter--lounge .ev-copy { top: clamp(80px, 11vh, 150px); left: clamp(24px, 6vw, 130px); text-align: left; align-items: flex-start; }
.ev-lounge-a { top: 3%; left: clamp(600px, 43vw, 760px); right: 0; height: clamp(400px, 36vw, 500px); }   /* HERO BAR — SHORTER (esp. on wide screens where it ran too far down): explicit height (not aspect-ratio, so WIDTH stays as left→right) trims it top+bottom via object-fit:cover, keeping the bar + barstools centred. Its lower-right edge reaches down to overlap the lamp so they cross-fade. */
/* Red chairs (re-added, SMALLER) — dropped into the dark centre-left void, below the hero
   bar's countertop and above/slightly-left of the green room's potted tree. z-index 2 puts it
   in FRONT of the hero's faded lower edge but BEHIND the green room, so it fills the gap and
   connects the two without covering the bar or crowding the tree. It's --land, so it inherits
   the same soft radial-core + linear-edge feathering as the rest (Change 2). */
.ev-lounge-d { top: calc(354px + 6vw); left: clamp(360px, 30vw, 530px); width: clamp(280px, 27vw, 410px); height: clamp(160px, 15vw, 220px); }   /* seated in the little black void where the smoke flows — the pocket between the HERO BAR's lower edge (above) and the green room's potted tree (below/right). left tracks at 30vw: right enough to sit in the dark pocket (midway between the old copy-side spot and the lamp), but not so far it crowds the lamp. top overlaps the bar's bottom and feathers down over the tree top, so it cross-fades into both; nudged up a touch so more of it tucks under the bar. Clears the copy column, so no text/button clash. */
/* CHANGE 3 — the GREEN-ROOM + LAMP unit shifts RIGHT by the SAME amount (b's left grows, e's
   right shrinks by the identical value) so they move together and the b↔e blend is untouched. */
.ev-lounge-b { top: max(41%, calc(485px + 8.5vw)); left: calc(clamp(0px, 3vw, 90px) + clamp(50px, 5.5vw, 120px)); width: clamp(560px, 68vw, 1220px); height: clamp(330px, 35vw, 560px); }   /* GREEN-ROOM — moved UP as one piece with the lamp; width/height UNCHANGED so the b↔e blend is preserved. top tracks the copy button (which scales with vw) so it tucks just under it and never overlaps the text at any width. */
.ev-lounge-e { top: max(31%, calc(355px + 8.5vw)); right: calc(clamp(120px, 13vw, 240px) - clamp(50px, 5.5vw, 120px)); width: clamp(260px, 28vw, 460px); height: clamp(390px, 41vw, 610px); }   /* BANQUETTE/LAMP — moved UP with the green room (kept ~130px above it, width/height UNCHANGED so the b↔e overlap is preserved); raised so its TOP overlaps the hero bar's lower-right corner. */
.ev-chapter--lounge .ev-photo img { object-position: 50% 48%; }
/* GREEN-ROOM framed a touch lower so it reads as tables + seating and its bright ceiling
   sits OUT of the feathered top edge, so the seam with the red-chairs above dissolves clean. */
.ev-chapter--lounge .ev-lounge-b img { object-position: 50% 60%; }

/* ==========================================================================
   Lounge blend — the five photos OVERLAP and CROSS-FADE into ONE cohesive image.
   NO opaque backing (that was what turned them into hard-edged separate tiles —
   an opaque box reads as a photo SITTING ON the one below). Instead each photo has:
     • a solid, fully-opaque CORE (radial #000 out to ~48% + wide linear plateaus) so
       it reads clearly and covers the busy middle of whatever it overlaps, and
     • a LONG, SMOOTH feather from that core out to fully transparent at the edge.
   The photos overlap DEEPLY (positions above), so each top photo's opaque core sits
   over its neighbour's feathered edge while its OWN feather dissolves gradually into
   the neighbour's core — a seamless cross-fade in both directions, no visible seam,
   no isolated rectangle. z-index just fixes who is on top at each crossing.
   Uniform grade so the blended photos read as one continuous space. Scoped to lounge.
   ========================================================================== */
.ev-chapter--lounge .ev-photo img {
  filter: brightness(0.9) saturate(1.04) contrast(1.05);
}
.ev-chapter--lounge .ev-lounge-a { z-index: 1; }
.ev-chapter--lounge .ev-lounge-d { z-index: 2; }   /* RED CHAIRS — in front of the hero's fade, behind the green room */
.ev-chapter--lounge .ev-lounge-b { z-index: 4; }   /* GREEN-ROOM behind the lamp */
.ev-chapter--lounge .ev-lounge-e { z-index: 5; }   /* LAMP in front — preserves the good b↔e blend */
/* HERO BAR gets its OWN mask: a LONG soft LEFT feather so its true left edge dissolves into
   the warm near-black toward the text column (the hard-looking vertical line there is the
   bar's own back edge INSIDE the photo, not the frame edge). Soft top/right too, and a soft
   BOTTOM so its lower-left corner cross-fades into the room unit where they meet (same
   mask-gradient feathering as the b↔e blend). */
.ev-chapter--lounge .ev-lounge-a img {
  -webkit-mask-image:
    linear-gradient(to right,  transparent 0%, #000 33%, #000 90%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 14%, #000 90%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right,  transparent 0%, #000 33%, #000 90%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 14%, #000 90%, transparent 100%);
  mask-composite: intersect;
}
/* Opaque core + long smooth feather → clean cross-fade where photos overlap. */
.ev-chapter--lounge .ev-photo--land img {
  -webkit-mask-image:
    radial-gradient(84% 86% at 50% 47%, #000 46%, rgba(0,0,0,0.55) 68%, transparent 96%),
    linear-gradient(to right,  transparent 0%, #000 14%, #000 86%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    radial-gradient(84% 86% at 50% 47%, #000 46%, rgba(0,0,0,0.55) 68%, transparent 96%),
    linear-gradient(to right,  transparent 0%, #000 14%, #000 86%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%);
  mask-composite: intersect;
}
/* RED CHAIRS — a longer TOP feather (top ramp 16% -> 24%) so its top edge dissolves
   more softly into the bar image above it. Same mask as --land otherwise. */
.ev-chapter--lounge .ev-lounge-d img {
  -webkit-mask-image:
    radial-gradient(84% 86% at 50% 47%, #000 46%, rgba(0,0,0,0.55) 68%, transparent 96%),
    linear-gradient(to right,  transparent 0%, #000 14%, #000 86%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 24%, #000 84%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    radial-gradient(84% 86% at 50% 47%, #000 46%, rgba(0,0,0,0.55) 68%, transparent 96%),
    linear-gradient(to right,  transparent 0%, #000 14%, #000 86%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 24%, #000 84%, transparent 100%);
  mask-composite: intersect;
}
.ev-chapter--lounge .ev-photo--port img {
  -webkit-mask-image:
    radial-gradient(86% 84% at 50% 47%, #000 46%, rgba(0,0,0,0.55) 68%, transparent 96%),
    linear-gradient(to right,  transparent 0%, #000 16%, #000 84%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 13%, #000 87%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    radial-gradient(86% 84% at 50% 47%, #000 46%, rgba(0,0,0,0.55) 68%, transparent 96%),
    linear-gradient(to right,  transparent 0%, #000 16%, #000 84%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 13%, #000 87%, transparent 100%);
  mask-composite: intersect;
}

/* ---- THE DEN — MIRROR: copy TOP-RIGHT; photos are ONE overlapping, softly
   feathered collage (like the Lounge) that fills the section with no dead voids.
   Everything is sized/positioned in vw so the whole mesh scales together and stays
   connected at any width; the two tops that sit beside the right-hand copy are
   floored in px so they never rise into the text as the photos shrink. The
   negative margin-top pulls the Den up so its top photo cross-fades into the
   Lounge's feathered tail — a smooth Lounge→Den seam, not two stacked boxes. */
.ev-chapter--den { min-height: clamp(1200px, 103.5vw, 1540px); margin-top: 0; }
.ev-chapter--den .ev-copy { top: clamp(80px, 11vh, 150px); right: clamp(24px, 6vw, 130px); left: auto; text-align: right; align-items: flex-end; }
.ev-chapter--den .ev-rule { margin-left: auto; }
/* Widths/heights are vw with clamp CAPS so the vertical layout freezes at the wide
   (~1500px) design instead of ballooning past the fixed-size copy. a's width tracks
   the copy's left edge (calc) so the gap beside the text stays tight at every width;
   b's & d's tops are capped so they stay just under the copy on the right. */
.ev-den-a { left: -2.8vw; top: clamp(90px, 9vw, 140px);    width: calc(95vw - 460px);        height: clamp(320px, 32vw, 540px); }   /* downstairs bar+lounge — establishing shot; DROPPED DOWN (top no longer 0) with a downward-fading top so it ends lower and does NOT blend up into the Lounge — clean chapter break above it */
.ev-den-c { left: 4.2vw;  top: clamp(420px, 38vw, 600px);  width: clamp(300px, 30.5vw, 590px);  height: clamp(350px, 29vw, 480px); }   /* candlelit tables — CROPPED DOWN (shorter frame + object-position bottom) so the round tables sit BELOW the bar+TV photo and the red banquette is cropped off its top; still overlaps a + b + e */
.ev-den-b { left: 20vw;   top: clamp(480px, 38.9vw, 580px); width: clamp(500px, 53vw, 1050px);   height: clamp(360px, 37vw, 560px);  }   /* red banquette room — central bridge; right edge stays left of the copy */
.ev-den-d { left: 62.5vw; top: clamp(575px, 42.4vw, 620px); width: clamp(360px, 36vw, 720px);    height: clamp(520px, 61vw, 920px);  }   /* green-velvet lounge — right column; top capped just below the BOOK THE DEN button */
.ev-den-e { left: 4.9vw;  top: clamp(620px, 65.3vw, 980px); width: clamp(500px, 55.6vw, 1120px); height: clamp(360px, 37vw, 560px);  }   /* Signature Bites detail — lower band, overlaps c + b + d */
/* Downstairs reads darker/deeper — keep the darker grade, but DROP the heavy
   drop-shadow (it smeared dark halos between the now-overlapping photos). */
.ev-chapter--den .ev-photo img { filter: brightness(0.72) saturate(1.04) contrast(1.12); }
/* Lounge-quality feathering (opaque core + long smooth edge fade) so the deep
   overlaps cross-fade into one continuous image. Scoped to the Den. */
.ev-chapter--den .ev-photo--land img {
  -webkit-mask-image:
    radial-gradient(84% 86% at 50% 47%, #000 46%, rgba(0,0,0,0.55) 68%, transparent 96%),
    linear-gradient(to right,  transparent 0%, #000 14%, #000 86%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    radial-gradient(84% 86% at 50% 47%, #000 46%, rgba(0,0,0,0.55) 68%, transparent 96%),
    linear-gradient(to right,  transparent 0%, #000 14%, #000 86%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%);
  mask-composite: intersect;
}
.ev-chapter--den .ev-photo--port img {
  -webkit-mask-image:
    radial-gradient(86% 84% at 50% 47%, #000 46%, rgba(0,0,0,0.55) 68%, transparent 96%),
    linear-gradient(to right,  transparent 0%, #000 16%, #000 84%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 13%, #000 87%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    radial-gradient(86% 84% at 50% 47%, #000 46%, rgba(0,0,0,0.55) 68%, transparent 96%),
    linear-gradient(to right,  transparent 0%, #000 16%, #000 84%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 13%, #000 87%, transparent 100%);
  mask-composite: intersect;
}
/* CHANGE 1 — HARD BREAK: the top bar photo gets a STRONG top feather so its upper
   edge fades softly DOWNWARD into the near-black instead of reaching up into the
   Lounge. Combined with top being dropped down (above) this opens a clean dark gap
   between Chapter One and Chapter Two.
   SEAM FIX: the radial is made taller/lower-centred (104% at 58%) and the bottom
   linear kept opaque to 94% so a's BOTTOM stays opaque all the way down to its box
   edge — it fills UNDER b's (lengthened) top feather so the a→b horizontal seam
   cross-fades instead of drawing a hard line. (Top-break fade is unchanged.) */
.ev-chapter--den .ev-den-a img {
  -webkit-mask-image:
    radial-gradient(84% 104% at 50% 58%, #000 44%, rgba(0,0,0,0.55) 72%, transparent 98%),
    linear-gradient(to right,  transparent 0%, #000 14%, #000 86%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 40%, #000 94%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    radial-gradient(84% 104% at 50% 58%, #000 44%, rgba(0,0,0,0.55) 72%, transparent 98%),
    linear-gradient(to right,  transparent 0%, #000 14%, #000 86%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 40%, #000 94%, transparent 100%);
  mask-composite: intersect;
}
/* SEAM FIX (paired with a above): b (the red banquette room, directly under a) gets
   a LONGER top feather (top ramp 16% -> 30%) so its top edge dissolves gradually up
   into a instead of meeting it at a hard line. Otherwise identical to the shared den
   --land mask — every other edge/blend of b is untouched. */
.ev-chapter--den .ev-den-b img {
  -webkit-mask-image:
    radial-gradient(84% 86% at 50% 47%, #000 46%, rgba(0,0,0,0.55) 68%, transparent 96%),
    linear-gradient(to right,  transparent 0%, #000 14%, #000 86%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 30%, #000 84%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    radial-gradient(84% 86% at 50% 47%, #000 46%, rgba(0,0,0,0.55) 68%, transparent 96%),
    linear-gradient(to right,  transparent 0%, #000 14%, #000 86%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 30%, #000 84%, transparent 100%);
  mask-composite: intersect;
}
/* CHANGE 2 — crop the candle-tables photo toward its BOTTOM (the tables), cropping
   the red banquette off the top so it stops cluttering the upper-left bar+TV photo. */
.ev-chapter--den .ev-den-c img { object-position: 50% 96%; }
/* CHANGE 1 — the chapter divider that sits in the dark break above the Den: a cream
   (--ink) hairline spanning ~75% of the page, centered, tapering to transparent at
   both ends so it fades elegantly rather than ending hard. */
.ev-chapter .ev-chapter-break {
  position: absolute;
  top: clamp(30px, 3vw, 56px);
  left: 0; right: 0; margin-inline: auto;
  width: 75%;
  height: 2px;
  z-index: 6;
  background: linear-gradient(90deg, transparent 0%, var(--ink) 20%, var(--ink) 80%, transparent 100%);
  opacity: 0.9;
  pointer-events: none;
}
@media (max-width: 960px) { .ev-chapter .ev-chapter-break { display: none; } }

/* ---- CATERING & DRINK PACKAGES — copy TOP-CENTRE; photos are ONE soft feathered
   collage (like the Den/Lounge) clustered AROUND the centred text. vw sizing with
   clamp CAPS freezes the layout at the wide (~1500px) design so it doesn't balloon
   past the fixed-size copy. */
.ev-chapter--catering { min-height: clamp(1190px, 88.9vw, 1460px); }
/* Centred WITHOUT transform — the reveal animation owns `transform` (translateY),
   so we centre via left:0/right:0 + margin:auto instead of translateX(-50%). */
.ev-chapter--catering .ev-copy {
  top: clamp(80px, 11vh, 140px); left: 0; right: 0; margin-inline: auto;
  width: min(94vw, 46rem);
  text-align: center; align-items: center;
}
/* This chapter's title is a longer three-part lockup — size it down so it holds
   on one line at desktop widths, and let it wrap gracefully if it must. */
.ev-chapter--catering .ev-name {
  font-size: clamp(26px, 3.6vw, 50px);
  white-space: nowrap;
}
@media (max-width: 1180px) and (min-width: 961px) {
  .ev-chapter--catering .ev-name { white-space: normal; }
}
.ev-chapter--catering .ev-rule { margin-left: auto; margin-right: auto; }
.ev-chapter--catering .ev-actions { justify-content: center; }
/* a (flame) + b (caviar) FLANK the centred copy left/right (anchored to the outer
   edges with capped widths so they stay in the side margins, never into the words);
   c (plated dish) + d (coupe) sit BELOW the copy and overlap in the centre-bottom to
   bridge the collage. Tops of c/d are floored so they stay under the copy. */
.ev-cat-a { left: -3vw;  top: clamp(128px, 12.4vw, 218px); width: clamp(360px, 32vw, 560px); height: clamp(600px, 61vw, 1150px); }   /* flaming cocktail — left flank; raised to balance the U with the caviar */
.ev-cat-b { left: auto; right: -3vw; top: clamp(180px, 16vw, 270px); width: clamp(360px, 32vw, 560px); height: clamp(600px, 61vw, 1150px); }   /* caviar canapés — right flank */
.ev-cat-c { left: clamp(110px, 11.8vw, 260px); top: clamp(567px, 40.8vw, 647px);  width: clamp(470px, 41.7vw, 720px); height: clamp(470px, 39.6vw, 680px); }   /* plated dish — lower centre-left, bridges; RAISED into the U (opaque content still clears the button) */
.ev-cat-d { left: clamp(560px, 48.6vw, 840px); top: clamp(568px, 41vw, 648px); width: clamp(420px, 35.4vw, 620px); height: clamp(470px, 39.2vw, 675px); }   /* coupe w/ orchid — lower centre-right, bridges; RAISED into the U (opaque content still clears the button) */
/* Feather every catering photo like the Den/Lounge — opaque core + long smooth edge
   fade dissolving into neighbours + the near-black. Kills the old hard diagonal /
   triangular crops. Slightly darker grade + subject-biased object-position tone down
   the bright marble/slate surfaces so they don't read as hard geometric shapes. */
.ev-chapter--catering .ev-photo img {
  filter: brightness(0.84) saturate(1.05) contrast(1.07);
  object-position: 50% 32%;
}
.ev-chapter--catering .ev-cat-d img { object-position: 50% 14%; }   /* coupe: bias up so the bright marble tabletop diagonal falls out of frame */
.ev-chapter--catering .ev-photo--port img {
  -webkit-mask-image:
    radial-gradient(82% 82% at 50% 44%, #000 44%, rgba(0,0,0,0.5) 66%, transparent 95%),
    linear-gradient(to right,  transparent 0%, #000 16%, #000 84%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 15%, #000 85%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    radial-gradient(82% 82% at 50% 44%, #000 44%, rgba(0,0,0,0.5) 66%, transparent 95%),
    linear-gradient(to right,  transparent 0%, #000 16%, #000 84%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 15%, #000 85%, transparent 100%);
  mask-composite: intersect;
}

/* Small tag chips that make the on-site / off-site offer unmissable */
.ev-modes { display: flex; gap: clamp(10px, 1.4vw, 18px); flex-wrap: wrap; justify-content: center; margin-top: clamp(4px, 0.8vh, 10px); }
.ev-mode {
  font-family: var(--font-body); font-weight: 500; font-size: 11px;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink);
  padding: 8px 18px; border: 1px solid rgba(199,154,84,0.5); border-radius: 999px;
  background: rgba(199,154,84,0.06);
  text-shadow: 0 1px 12px rgba(0,0,0,0.8);
}
.ev-mode b { color: var(--gold-bright); font-weight: 600; }

/* ==========================================================================
   CLOSING — "Your Affair Awaits": centred close that bookends the hero. A warm
   feathered space photo fills the section; the plan-your-event copy sits over it.
   ========================================================================== */
.ev-close {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(100px, 15vh, 170px) clamp(28px, 8vw, 128px);
  overflow: clip;
}
.ev-close__media { position: absolute; inset: 0; z-index: 1; margin: 0; line-height: 0; pointer-events: none; }
.ev-close__media img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 52%;
  filter: brightness(0.8) saturate(1.02) contrast(1.06);
  -webkit-mask-image:
    radial-gradient(88% 84% at 50% 52%, #000 38%, rgba(0,0,0,0.4) 74%, transparent 100%),
    linear-gradient(to right,  transparent 0%, #000 20%, #000 80%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    radial-gradient(88% 84% at 50% 52%, #000 38%, rgba(0,0,0,0.4) 74%, transparent 100%),
    linear-gradient(to right,  transparent 0%, #000 20%, #000 80%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%);
  mask-composite: intersect;
}
.ev-close__media::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 95% at 50% 52%, transparent 26%, rgba(14,9,8,0.64) 100%),
    linear-gradient(to bottom, rgba(14,9,8,0.5) 0%, transparent 30%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 18%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 18%);
}
.ev-close__inner {
  position: relative;
  z-index: 3;
  margin: 0 auto;
  max-width: min(92vw, 680px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(14px, 2vh, 24px);
}
.ev-close__inner::before {
  content: "";
  position: absolute; z-index: -1; inset: -22% -26%; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(14,9,8,0.78) 0%, rgba(14,9,8,0.48) 48%, var(--bg-0) 78%);
}
.ev-close .ev-actions { justify-content: center; margin-top: clamp(18px, 2.6vh, 30px); }
.ev-close__note {
  margin: 0;
  font-family: var(--font-body); font-weight: 300; font-size: 11px;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted); opacity: 0.62;
}

/* ==========================================================================
   Scroll-driven entrances (same technique as membership / homepage). Content
   surfaces out of the ambient as it enters; photos rise softly. Sections are
   transparent over the ONE fixed ambient, so seams blend with no hard lines.
   ========================================================================== */
@keyframes ev-rise {
  0%   { opacity: 0; transform: translateY(46px); filter: blur(5px); animation-timing-function: cubic-bezier(0.16,0.84,0.24,1); }
  24%  { opacity: 1; transform: translateY(0);     filter: blur(0); }
  82%  { 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(-28px); filter: blur(3px); }
}
@keyframes ev-reveal-up {
  from { opacity: 0; transform: translateY(38px); filter: blur(5px); }
  to   { opacity: 1; transform: translateY(0);    filter: blur(0); }
}
@keyframes ev-reveal-photo {
  from { opacity: 0; transform: scale(1.05); }
  to   { opacity: 1; transform: scale(1); }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .ev-hero__inner, .ev-close__inner { animation: ev-rise both; animation-timeline: view(); animation-range: cover; }
    .ev-copy { animation: ev-reveal-up both; animation-timeline: view(); animation-range: entry 4% cover 24%; }
    .ev-photo { animation: ev-reveal-photo both; animation-timeline: view(); animation-range: entry 0% cover 30%; }
  }
}

/* ==========================================================================
   Responsive — below 960px the staged overlap can't breathe, so each chapter
   STACKS cleanly: copy first, then its photos in a single feathered column at a
   readable size. No overlap, no boxes. (A later pass reflows the walk-through.)
   ========================================================================== */
@media (max-width: 960px) {
  .ev-hero, .ev-close {
    padding: clamp(120px, 18vh, 170px) clamp(26px, 7vw, 60px) clamp(80px, 12vh, 120px);
  }
  .ev-title { white-space: normal; font-size: clamp(40px, 12vw, 76px); line-height: 1; }
  .ev-hero__media img { width: auto; height: clamp(320px, 52vh, 560px); max-width: 92vw; object-fit: cover; }

  /* ===== Mobile chapter layout — mimics the membership tiers =====
     hero picture on top → name/info/button tucked up under its feathered bottom →
     the remaining photos as an overlapping, feathered collage → a divider line. */
  .ev-chapter {
    min-height: 0 !important;
    display: flex; flex-direction: column; align-items: center;
    padding: clamp(78px, 12vh, 128px) clamp(22px, 6vw, 46px) clamp(28px, 5vh, 56px);
  }
  .ev-stage { display: contents; }   /* promote the photos into the chapter's flex flow */

  /* Copy sits BETWEEN the hero (order 0) and the collage (order 2), tucked up
     under the hero's feathered bottom, with a gap below before the collage. */
  .ev-copy {
    order: 1;
    position: relative !important; z-index: 6 !important; inset: auto !important; transform: none !important;
    align-self: stretch; max-width: 100%;
    margin: clamp(-72px, -9vh, -50px) 0 clamp(22px, 4vh, 40px) !important;   /* slight tuck up under the hero's feathered bottom (matches membership) */
    text-align: left !important; align-items: flex-start !important;
    animation: none !important;
  }
  .ev-copy::before { display: none; }
  .ev-name { white-space: normal; font-size: clamp(32px, 9vw, 54px); line-height: 1.05; }
  /* Catering title wraps on mobile (desktop keeps its nowrap) so "Packages" drops
     to a second line instead of running off the screen. */
  .ev-chapter--catering .ev-name { white-space: normal !important; }
  .ev-chapter--den .ev-copy, .ev-chapter--catering .ev-copy { text-align: left !important; align-items: flex-start !important; }
  .ev-chapter--den .ev-rule, .ev-chapter--catering .ev-rule { margin-left: 0; margin-right: 0; }
  .ev-chapter--den .ev-actions, .ev-chapter--catering .ev-actions { justify-content: flex-start; }
  .ev-modes { justify-content: flex-start; }

  /* Every chapter photo: in-flow (stagger via align-self, not margin auto).
     height: auto is CRITICAL — the figures carry a fixed desktop height, which on
     mobile left ~180px of empty space BELOW each image; that phantom space (not the
     margins) was the real gap under the hero and between collage photos. */
  .ev-photo {
    position: relative !important; inset: auto !important;
    height: auto !important;
    aspect-ratio: auto !important; transform: none !important;
    animation: none !important; opacity: 1 !important;
    margin: 0;   /* NOT auto — auto would defeat the align-self left/right stagger below */
  }
  .ev-photo img { width: 100% !important; height: auto !important; }

  /* Hero = the first photo, largest, on top. Feathered on the sides + top but kept
     fairly SOLID at the bottom (linear fade only in the last ~10%) so the copy can
     tuck up under its VISIBLE edge — a symmetric oval would end the image high and
     leave a transparent gap the copy can't reach (that was the "no overlap" bug). */
  .ev-stage .ev-photo:first-child { order: 0; width: min(86vw, 440px) !important; }
  .ev-chapter .ev-stage .ev-photo:first-child img {
    -webkit-mask-image:
      linear-gradient(to right,  transparent 0%, #000 12%, #000 88%, transparent 100%),
      linear-gradient(to bottom, transparent 0%, #000 9%,  #000 90%, transparent 100%) !important;
    -webkit-mask-composite: source-in !important;
    mask-image:
      linear-gradient(to right,  transparent 0%, #000 12%, #000 88%, transparent 100%),
      linear-gradient(to bottom, transparent 0%, #000 9%,  #000 90%, transparent 100%) !important;
    mask-composite: intersect !important;
  }

  /* Supporting photos = a left/right-staggered collage that overlaps GENTLY and
     EVENLY. Uniform 4:3 frames + one soft oval feather + one shared overlap value
     mean every photo laps the next by the same slight amount — none jammed over
     another, none left sitting alone. */
  .ev-stage .ev-photo:not(:first-child) {
    order: 2;
    width: min(62vw, 272px) !important;
    margin-top: clamp(-52px, -6.5vh, -42px) !important;   /* gentle overlap onto the previous photo — softened below */
    z-index: 2;
  }
  .ev-stage .ev-photo:not(:first-child) img {
    /* UNIFORM frame height (explicit — aspect-ratio is ignored on an <img> whose
       height is auto, so the natural ratios would make the visible overlap uneven).
       Uniform height + one overlap value = the same gentle lap for every photo. */
    height: clamp(168px, 22vh, 196px) !important;
    object-fit: cover !important; object-position: 50% 46% !important;
    /* Feather ALL FOUR edges so the photos blend into each other and the dark —
       two linears melt the sides + top + bottom, a radial rounds the corners; a
       lone radial (as before) left the mid-side edges opaque = hard square edges. */
    -webkit-mask-image:
      radial-gradient(74% 72% at 50% 50%, #000 38%, rgba(0,0,0,0.4) 66%, transparent 95%),
      linear-gradient(to right,  transparent 0%, #000 13%, #000 87%, transparent 100%),
      linear-gradient(to bottom, transparent 0%, #000 13%, #000 87%, transparent 100%) !important;
    -webkit-mask-composite: source-in !important;
    mask-image:
      radial-gradient(74% 72% at 50% 50%, #000 38%, rgba(0,0,0,0.4) 66%, transparent 95%),
      linear-gradient(to right,  transparent 0%, #000 13%, #000 87%, transparent 100%),
      linear-gradient(to bottom, transparent 0%, #000 13%, #000 87%, transparent 100%) !important;
    mask-composite: intersect !important;
  }
  /* First supporting photo: a small gap below the copy (it starts the group); the
     rest lap upward onto it by the same even amount above. */
  .ev-stage .ev-photo:nth-child(2) { align-self: flex-start; margin-top: clamp(10px, 2vh, 20px) !important; z-index: 2; }
  .ev-stage .ev-photo:nth-child(3) { align-self: flex-end;   z-index: 3; }
  .ev-stage .ev-photo:nth-child(4) { align-self: flex-start; z-index: 4; }
  .ev-stage .ev-photo:nth-child(5) { align-self: flex-end;   z-index: 5; }
  .ev-stage .ev-photo:nth-child(6) { align-self: center;     z-index: 6; }

  /* Clear divider line between this section and the next. */
  .ev-chapter::after {
    content: ""; order: 3;
    width: min(82%, 360px); height: 1px;
    margin-top: clamp(42px, 8vh, 74px);
    background: linear-gradient(90deg, transparent 0%, rgba(199, 154, 84, 0.6) 22%, rgba(199, 154, 84, 0.6) 78%, transparent 100%);
  }
}

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

/* ==========================================================================
   EVENT INQUIRY MODAL — opened by the Book / Request / Plan buttons
   (events-inquiry.js). Same moody palette + type system as the rest of the
   page; works desktop + mobile; closeable via ✕ / scrim / Escape.
   ========================================================================== */
.eiq {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(14px, 4vw, 40px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 340ms ease, visibility 0s linear 340ms;
}
.eiq.is-open { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 340ms ease, visibility 0s; }

.eiq__scrim {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(199, 154, 84, 0.10), rgba(14, 9, 8, 0) 46%),
    rgba(9, 6, 5, 0.86);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.eiq__panel {
  position: relative;
  width: min(560px, 100%);
  max-height: 92vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: clamp(30px, 5vw, 50px) clamp(22px, 5vw, 46px) clamp(26px, 4vw, 40px);
  background:
    radial-gradient(130% 80% at 50% -12%, rgba(64, 43, 25, 0.5), rgba(20, 13, 9, 0) 60%),
    linear-gradient(180deg, #1a120c, #120c08);
  border: 1px solid rgba(199, 154, 84, 0.26);
  border-radius: 16px;
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.72), 0 0 0 1px rgba(0, 0, 0, 0.4);
  transform: translateY(16px) scale(0.985);
  transition: transform 400ms cubic-bezier(0.2, 0.7, 0.2, 1);
  outline: none;
}
.eiq.is-open .eiq__panel { transform: none; }

.eiq__x {
  position: absolute; top: 10px; right: 12px;
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  padding: 0; background: none; border: 0; cursor: pointer;
  color: var(--gold-bright); font-size: 27px; line-height: 1;
  opacity: 0.82; transition: opacity 200ms ease;
  -webkit-tap-highlight-color: transparent;
}
.eiq__x:hover { opacity: 1; }

.eiq__eyebrow {
  margin: 0 0 clamp(8px, 1.4vh, 14px);
  padding-right: 46px;   /* keep the source label clear of the ✕ */
  font-family: var(--font-body); font-weight: 500;
  font-size: 11px; letter-spacing: 0.42em; text-transform: uppercase;
  color: var(--gold);
}
.eiq__title {
  margin: 0 0 clamp(8px, 1.4vh, 14px);
  font-family: var(--font-caps); font-weight: 400;
  font-size: clamp(30px, 6vw, 46px); line-height: 1; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--ink);
}
.eiq__title .t-script {
  font-family: var(--font-script); font-size: 1.4em; text-transform: none; letter-spacing: 0.005em;
  color: var(--gold-bright);
}
.eiq__intro {
  margin: 0 0 clamp(18px, 3vh, 28px);
  font-family: var(--font-body); font-weight: 300; font-size: 14px; line-height: 1.62;
  color: var(--muted);
}

.eiq__row { display: flex; gap: clamp(12px, 2.4vw, 18px); }
.eiq__row > label { flex: 1; min-width: 0; }
.eiq__form label {
  display: flex; flex-direction: column; gap: 7px;
  margin-bottom: clamp(13px, 2vh, 18px);
  font-family: var(--font-body); font-weight: 500;
  font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted);
}
.eiq__form input {
  width: 100%;
  font-family: var(--font-body); font-weight: 400; font-size: 16px; letter-spacing: 0.02em;
  color: var(--ink);
  background: rgba(255, 246, 234, 0.035);
  border: 1px solid rgba(199, 154, 84, 0.28);
  border-radius: 10px;
  padding: 13px 15px;
  -webkit-appearance: none; appearance: none;
  transition: border-color 220ms ease, background 220ms ease, box-shadow 220ms ease;
}
.eiq__form input::placeholder { color: rgba(154, 141, 127, 0.6); }
.eiq__form input:hover { border-color: rgba(199, 154, 84, 0.5); }
.eiq__form input:focus {
  outline: none; border-color: var(--gold-bright);
  background: rgba(255, 246, 234, 0.06);
  box-shadow: 0 0 0 1px rgba(230, 192, 121, 0.35), 0 0 22px rgba(199, 154, 84, 0.16);
}
.eiq__form input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(78%) sepia(24%) saturate(560%) hue-rotate(2deg) brightness(92%);
  cursor: pointer; opacity: 0.85;
}

.eiq__submit {
  width: 100%; justify-content: center;
  margin-top: clamp(8px, 1.6vh, 16px);
  padding: 15px 26px; font-size: 12px; letter-spacing: 0.22em;
  cursor: pointer; border: 0;
}
.eiq__submit[disabled] { opacity: 0.62; pointer-events: none; }
.eiq__status {
  margin: 12px 0 0; min-height: 1em; text-align: center;
  font-family: var(--font-body); font-size: 12.5px; letter-spacing: 0.03em;
  color: #E4A6A0;   /* only shown on error */
}

/* Confirmation view (replaces the form on success) */
.eiq__done { text-align: center; padding: clamp(18px, 5vh, 46px) 0 clamp(6px, 2vh, 16px); }
.eiq__done-mark { margin: 0 0 16px; font-size: 26px; color: var(--gold-bright); letter-spacing: 0.3em; }
.eiq__done-msg {
  margin: 0 auto clamp(24px, 4vh, 36px); max-width: 32ch;
  font-family: var(--font-display); font-style: italic; font-size: clamp(19px, 3.6vw, 25px);
  line-height: 1.4; color: var(--gold-bright);
}
.eiq__close-btn {
  font-family: var(--font-body); font-weight: 500; font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--ink); background: none; border: 1px solid rgba(199, 154, 84, 0.4);
  border-radius: 999px; padding: 12px 32px; cursor: pointer;
  transition: border-color 220ms ease, color 220ms ease;
}
.eiq__close-btn:hover { border-color: var(--gold-bright); color: var(--gold-bright); }

body.eiq-open { overflow: hidden; }

/* Very narrow phones: stack the paired fields so nothing is cramped. */
@media (max-width: 430px) {
  .eiq__row { flex-direction: column; gap: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .eiq { transition: opacity 1ms linear, visibility 0s; }
  .eiq__panel { transition: none; }
}