/* Moved verbatim from templates/_partials/global_rsvp_sheet.html (inline <style>) so it can be
   cached. Keep in sync with that template; cascade position = the
   <link> that replaced the <style> block. */
.hg-rsvp-modal{
  position:fixed;left:0;right:0;bottom:0;top:0;
  /* Mobile: sit ABOVE the schedule expand sheet (z-index:690) so the
     RSVP slide-up *replaces* it on top instead of rendering behind the
     flyer, but still BELOW the sticky bottom nav (z-index:700) so the
     nav stays visible. Desktop drawer override below bumps to 1000. */
  z-index:695;
  pointer-events:none;
}
.hg-rsvp-modal[hidden]{display:none;}
/* Scrim: solid ink wash, NO backdrop-blur. The deeper colour does
   the heavy lifting — glass effects were costing paint perf on
   older Android and made the cream sticky header peek through. */
.hg-rsvp-modal-scrim{
  position:absolute;inset:0;background:rgba(14,14,16,0.82);
  opacity:0;transition:opacity 0.28s ease;pointer-events:auto;
}
.hg-rsvp-modal.is-open .hg-rsvp-modal-scrim{opacity:1;}
.hg-rsvp-modal-card{
  position:absolute;left:0;right:0;margin:0 auto;
  /* Mobile slide-up: bottom edge tucks BEHIND the sticky bottom nav
     so the nav stays visible on top of the sheet. Width is capped at
     100vw so the card never bleeds past the viewport — the form
     inside is constrained by `min-width: 0` on every flex/grid child
     so it shrinks to the card width even when content has natural
     intrinsic min-content (e.g. long button labels). */
  bottom:60px;
  width:100%; max-width:100vw; box-sizing:border-box;
  max-height:min(82dvh, calc(100dvh - 80px));
  overflow-y:auto;overflow-x:hidden;
  /* INK redesign — noir sheet matches the rest of the Therapy Sound
     dark shell. Halftone dot overlay is painted via ::before below. */
  background:var(--ts-ink, #0D0B09);
  color:var(--ts-paper, #ECE6D8);
  border-top-left-radius:28px;border-top-right-radius:28px;
  /* Top + right edge highlights follow the rounded corners (inset
     box-shadows respect border-radius; the previous linear-gradient
     overlay painted a straight line that got chopped at the curves).
     Top edge sits at low opacity; right edge is brighter so the
     top-right corner reads as the brightest point — light hitting
     the sheet from the upper-right at an angle. */
  border-top:1px solid rgba(255,255,255,0.18);
  padding:12px 16px calc(20px + env(safe-area-inset-bottom,0px));
  box-shadow:
    0 -32px 70px -22px rgba(0,0,0,0.65),
    inset 0 1.5px 0 rgba(255,255,255,0.28),
    inset -1.5px 0 0 rgba(255,255,255,0.48);
  transform:translateY(calc(100% + 60px));
  transition:transform 0.32s cubic-bezier(0.5,0.1,0.2,1);
  pointer-events:auto;
  scrollbar-width:thin;
  scrollbar-color:var(--ts-teal, #1F8C8C) rgba(244,236,218,0.06);
  isolation:isolate;
}
/* Halftone overlay — same dot pattern as the polaroid template, scaled
   for the sheet surface. mix-blend-mode:multiply keeps the noir base
   visible while the dots punch shadow depth into it. */
.hg-rsvp-modal-card::before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(circle, #000 1px, transparent 1.4px);
  background-size:5px 5px;mix-blend-mode:multiply;opacity:0.35;
  border-top-left-radius:28px;border-top-right-radius:28px;
}
/* Brand-tinted gradient band at the top of the slide-up. Three
   radial blobs (teal / rust / deep-teal) lay down the aurora glow.
   A thin repeating-linear-gradient adds the "flowing line" texture
   from the Heritage Abstract Background inspiration the user
   shared — subtle diagonal bands every 22px that catch the light
   like fabric folds. A second linear-gradient layer pinned to the
   very top edge of the card paints a 1px highlight that fades
   transparent → white left-to-right, reading as light hitting the
   slide-up's right edge at an angle. Mask fades the whole band to
   transparent before the form rows. */
.hg-rsvp-modal-card::after{
  content:'';position:absolute;top:0;left:0;right:0;height:150px;
  z-index:0;pointer-events:none;
  border-top-left-radius:28px;border-top-right-radius:28px;
  background:
    /* Wavy line texture — soft diagonal bands suggesting folds. */
    repeating-linear-gradient(115deg, transparent 0 22px, rgba(244,236,218,0.05) 22px 24px),
    /* Aurora blobs. */
    radial-gradient(ellipse 70% 110% at 22% 12%, rgba(31,140,140,0.65), transparent 62%),
    radial-gradient(ellipse 55% 100% at 78% -10%, rgba(234,106,44,0.50), transparent 60%),
    radial-gradient(ellipse 90% 80% at 50% 100%, rgba(15,95,98,0.45), transparent 70%);
  opacity:0.85;
  mask-image:linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
  -webkit-mask-image:linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
}
/* Stack every direct child above the halftone overlay so they paint
   on top of the dot pattern instead of behind it. */
.hg-rsvp-modal-card > *{position:relative;z-index:1;}
/* Apply the min-width:0 + 100% width safety net on mobile too so the
   form shrinks to the card instead of stretching to intrinsic content
   width. Same rules the desktop drawer uses. */
.hg-rsvp-modal-card *{box-sizing:border-box;}
.hg-rsvp-modal-card .hg-rsvp-head-row,
.hg-rsvp-modal-card .hg-rsvp-head,
.hg-rsvp-modal-card .hg-rsvp-flyer-mini,
.hg-rsvp-modal-card .hg-rsvp-body,
.hg-rsvp-modal-card .hg-rsvp-form,
.hg-rsvp-modal-card .ts-form-row,
.hg-rsvp-modal-card .ts-form-g,
.hg-rsvp-modal-card .hg-rsvp-rail-wrap,
.hg-rsvp-modal-card .hg-rsvp-rail,
.hg-rsvp-modal-card .hg-rsvp-type-group{min-width:0;}
.hg-rsvp-modal-card .hg-rsvp-form input,
.hg-rsvp-modal-card .hg-rsvp-form select,
.hg-rsvp-modal-card .hg-rsvp-form textarea,
.hg-rsvp-modal-card .hg-rsvp-submit,
.hg-rsvp-modal-card .hg-rsvp-type-btn{
  width:100%; min-width:0; max-width:100%;
}
/* Desktop / tablet: full-height right-side slide-in drawer. Sits
   ABOVE the header (z-index:1000) so the drawer overlays the whole
   page. The scrim dims the rest of the site lightly while the
   drawer is open so the page stays partly visible behind. Single-
   column form, no flyer aside — the drawer is a focused RSVP
   affordance. */
@media(min-width:768px){
  .hg-rsvp-modal{
    z-index:1000;
  }
  .hg-rsvp-modal-scrim{
    /* Light overlay — the page is dimmed but still visible behind
       the drawer ("overlay the website a little"). */
    background:rgba(14,14,16,0.55);
  }
  .hg-rsvp-modal-card{
    /* Full-height drawer pinned to the right edge. Sized at 600px so
       First/Last + Email/Phone share rows comfortably and the head-row
       flyer can stretch ~2.5× its old footprint without crowding the
       title. INK reskin: same noir surface + halftone overlay as the
       mobile sheet. */
    top:0; bottom:0;
    left:auto; right:0; margin:0;
    width:min(390px, 100vw);
    max-width:100vw;
    max-height:none; height:100dvh;
    overflow-x:hidden;
    border-radius:0;
    border:0;
    border-left:1px solid rgba(244,236,218,0.10);
    box-shadow:-24px 0 50px -18px rgba(0,0,0,0.65);
    transform:translateX(100%);
    padding:36px 32px 28px;
  }
  /* Re-tune the halftone overlay for the desktop drawer: round only
     the left corners (the right edge runs flush against the viewport)
     so the dot pattern bites the rounded left edge but stays sharp
     on the right where the drawer meets the screen edge. */
  .hg-rsvp-modal-card::before{
    border-radius:0;
  }
  /* Re-tune the halftone overlay for the desktop drawer: round only
     the left corners (the right edge runs flush against the viewport)
     so the dot pattern bites the rounded left edge but stays sharp
     on the right where the drawer meets the screen edge. */
  .hg-rsvp-modal-card::before{
    border-radius:0;
  }
  /* Ensure no child can horizontally overflow the drawer's width.
     `min-width:0` on the grid/flex children forces them to shrink to
     the container width regardless of intrinsic content width (e.g.
     a horizontal date rail or a wide button label). */
  .hg-rsvp-modal-card *{max-width:100%;box-sizing:border-box;}
  .hg-rsvp-modal-card .hg-rsvp-body,
  .hg-rsvp-modal-card .hg-rsvp-form,
  .hg-rsvp-modal-card .hg-rsvp-flyer-mini,
  .hg-rsvp-modal-card .ts-form-row,
  .hg-rsvp-modal-card .ts-form-g,
  .hg-rsvp-modal-card .hg-rsvp-rail-wrap,
  .hg-rsvp-modal-card .hg-rsvp-rail,
  .hg-rsvp-modal-card .hg-rsvp-type-group,
  .hg-rsvp-modal-card .hg-rsvp-head{
    width:100%; min-width:0;
  }
  .hg-rsvp-modal-card .hg-rsvp-form input,
  .hg-rsvp-modal-card .hg-rsvp-form select,
  .hg-rsvp-modal-card .hg-rsvp-form textarea,
  .hg-rsvp-modal-card .hg-rsvp-submit{
    width:100%; min-width:0;
  }
  /* The wider 600px drawer fits the 2-col rows again: First/Last
     share a row, Email/Phone share a row, and the type-row keeps
     all three controls (tier dropdown + qty + total) inline. */
  .hg-rsvp-modal-card .hg-rsvp-body{grid-template-columns:1fr;gap:0;margin-top:0;}
  .hg-rsvp-modal-card .hg-rsvp-flyer{display:none;}
  /* Two fields per row on desktop: First/Last share row 1,
     Email/Phone share row 2. Mobile (<768px) still stacks. */
  .hg-rsvp-modal-card .hg-rsvp-form .ts-form-row{grid-template-columns:1fr 1fr;gap:10px;}
  /* Tier dropdown gets its own full-width row; qty + total share
     the row underneath. */
  .hg-rsvp-modal-card .hg-rsvp-form .hg-rsvp-type-row{grid-template-columns:1fr 1fr;gap:10px;align-items:end;}
  .hg-rsvp-modal-card .hg-rsvp-form .hg-rsvp-type-row .ts-form-g:first-child{grid-column:1 / -1;}
  .hg-rsvp-modal-card .hg-rsvp-form .hg-rsvp-type-row .ts-form-g:nth-child(2),
  .hg-rsvp-modal-card .hg-rsvp-form .hg-rsvp-type-row .ts-form-g:nth-child(3){grid-column:auto;}
  .hg-rsvp-modal-card .hg-rsvp-form .hg-rsvp-type-group{grid-template-columns:1fr 1fr;}
  /* Head-row collapses to a single column so the flyer can fill the
     drawer width (4:5 portrait), then the date rail sits full-width
     below it. CSS `order` swaps the markup order without touching
     the HTML — flyer renders first, head-left (which carries the
     rail; the title is `display:none` above) renders second. */
  .hg-rsvp-modal-card .hg-rsvp-head-row{
    grid-template-columns:1fr;gap:14px;margin-bottom:18px;
  }
  .hg-rsvp-modal-card .hg-rsvp-head-row .hg-rsvp-flyer-mini{order:1;}
  .hg-rsvp-modal-card .hg-rsvp-head-row .hg-rsvp-head-left{order:2;}
  /* Flyer thumb is a 4:5 portrait poster sized to fill the drawer
     content width — overrides the inherited `--tall` aspect:auto. */
  .hg-rsvp-modal-card .hg-rsvp-flyer-mini.hg-rsvp-flyer-mini--tall,
  .hg-rsvp-modal-card .hg-rsvp-flyer-mini{
    aspect-ratio:4/5;height:auto;width:100%;max-width:100%;
    align-self:stretch;
  }
  /* Date rail spans full drawer width below the flyer. */
  .hg-rsvp-modal-card .hg-rsvp-head-row .hg-rsvp-head-left{
    width:100%;
  }
  .hg-rsvp-modal-card .hg-rsvp-head-row .hg-rsvp-rail-wrap{width:100%;}
  /* Bigger top text + a touch more whitespace beneath. Title flips to
     paper-hi so it reads as a clean warm cream against the noir
     surface (matches the eyebrow tone). */
  .hg-rsvp-modal-card .hg-rsvp-head{padding-right:48px;padding-bottom:4px;}
  /* Selector boosted so it wins over the base `.hg-rsvp-title` rule
     declared later in this file. */
  /* Heading + "View all" link removed on desktop per design — the
     eyebrow + sub-line carry enough context for the right-anchored
     drawer, and the date rail still has its own tail "View all"
     pill so the bail-out path stays. */
  .hg-rsvp-modal-card .hg-rsvp-title,
  .hg-rsvp-modal-card .hg-rsvp-view-all{display:none;}
  .hg-rsvp-modal-card .hg-rsvp-sub{font-size:0.66rem;}
  .hg-rsvp-form input,.hg-rsvp-form select,.hg-rsvp-form textarea{
    padding:12px 18px; font-size:0.9rem;
  }
  .hg-rsvp-submit{padding:15px 22px; font-size:0.78rem;}
  .hg-rsvp-evpill{padding:9px 16px; font-size:0.72rem;}
  .hg-rsvp-evpill small{font-size:0.92rem;}
  .hg-rsvp-close{top:22px; right:22px; width:38px; height:38px;}
}
/* Scrollbar respects the card's top corner radius — the track + thumb
   sit 22px down from the top so they can never overlap the 24px rounded
   corner. Combined with the card's overflow:auto inside its border-
   radius, the scrollbar visually "bends" along the curve instead of
   running straight to the edge. */
.hg-rsvp-modal-card::-webkit-scrollbar{width:8px;}
.hg-rsvp-modal-card::-webkit-scrollbar-track{
  background:rgba(244,236,218,0.06);border-radius:99px;margin:22px 4px 14px;
}
.hg-rsvp-modal-card::-webkit-scrollbar-thumb{
  background:var(--ts-teal, #1F8C8C);border-radius:99px;
  border:1px solid rgba(244,236,218,0.18);
}
.hg-rsvp-modal-card::-webkit-scrollbar-thumb:hover{background:var(--ts-teal-700, #0F5F62);}
.hg-rsvp-modal.is-open .hg-rsvp-modal-card{transform:translateY(0);}
/* Hide the bottom-sheet grip on desktop/tablet since the sheet drops
   from the top. Mobile keeps it as the swipe-down affordance. */
@media(min-width:768px){
  .hg-rsvp-grip{display:none;}
}
.hg-rsvp-grip{
  display:block;width:48px;height:5px;border-radius:99px;
  background:rgba(244,236,218,0.20);margin:6px auto 12px;
}
/* Hide the bottom-sheet grip on desktop/tablet drawer — only the
   mobile slide-up uses it as a swipe-down affordance. */
@media(min-width:768px){
  .hg-rsvp-grip{display:none !important;}
}
.hg-rsvp-head{
  display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  margin:0 0 8px;padding-right:46px;
}
.hg-rsvp-eyebrow{
  font-family:var(--mono, 'Archivo Narrow', monospace);font-size:0.66rem;font-weight:500;
  letter-spacing:0.22em;text-transform:uppercase;color:var(--ts-teal-300, #6FAFAE);
  display:inline-flex;align-items:center;gap:8px;
}
.hg-rsvp-eyebrow::before{
  content:'';width:18px;height:1.5px;background:var(--ts-teal-300, #6FAFAE);
}
.hg-rsvp-eyebrow-sep{
  color:var(--ts-teal-300, #6FAFAE);opacity:.7;font-weight:400;
}
.hg-rsvp-eyebrow-tag{
  color:var(--ts-teal-300, #6FAFAE);font-weight:500;
}
/* Reduced title size — fits the compact right-anchored dropdown
   without overflow. Display flips to paper on the noir surface. */
.hg-rsvp-title{
  font-family:var(--slab, 'Archivo Black', sans-serif);font-weight:400;
  font-size:clamp(1.4rem,3.4vw,1.9rem);line-height:0.95;
  letter-spacing:-0.01em;color:var(--ts-paper, #ECE6D8);
  margin:0 0 4px;word-break:break-word;
}
.hg-rsvp-sub{
  font-family:var(--mono, 'Archivo Narrow', monospace);font-size:0.62rem;letter-spacing:0.22em;
  text-transform:uppercase;color:rgba(244,236,218,0.55);
  display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;
}
.hg-rsvp-sub b{font-weight:500;color:var(--ts-paper, #ECE6D8);letter-spacing:0.22em;}
/* Header "View all" link — only meaningful in the empty state.
   Stays inline-block so it sits in the title column without
   eating the flyer cell on the right. Hidden by JS when an event
   is picked (the rail's tail "View all" pill carries it from
   then on). */
.hg-rsvp-view-all{
  display:inline-flex;align-items:center;gap:4px;
  margin-top:6px;align-self:flex-start;
  font-family:var(--mono, 'Archivo Narrow', monospace);
  font-size:0.62rem;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--ts-teal-300, #6FAFAE);text-decoration:none;
  padding:6px 12px;border-radius:99px;
  border:1px solid rgba(111,175,174,0.4);
  transition:border-color 0.15s,color 0.15s;
}
.hg-rsvp-view-all:hover{border-color:var(--ts-teal-300, #6FAFAE);color:#fff;}
.hg-rsvp-view-all i{font-size:0.85em;}
.hg-rsvp-view-all[hidden]{display:none;}
.hg-rsvp-sub-arrow{color:var(--ts-teal-300, #6FAFAE);font-weight:500;}
.hg-rsvp-where{
  margin-top:7px;font-family:var(--mono, 'Archivo Narrow', monospace);
  font-size:0.62rem;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--ts-paper, #ECE6D8);display:flex;align-items:center;gap:6px;
}
.hg-rsvp-where-pin{color:var(--ts-teal-300, #6FAFAE);font-weight:600;}
.hg-rsvp-djs{margin-top:8px;display:flex;align-items:center;
  gap:5px;flex-wrap:wrap;}
.hg-rsvp-dj-av{width:28px;height:28px;border-radius:50%;overflow:hidden;
  background:radial-gradient(circle at 30% 30%,var(--ts-teal-700, #0F5F62),
  var(--ts-ink-2, #1A1612) 75%);display:flex;align-items:center;
  justify-content:center;color:var(--ts-paper, #ECE6D8);font-family:var(--slab,sans-serif);
  font-weight:700;font-size:0.66rem;border:1.5px solid rgba(244,236,218,0.18);
  flex:0 0 auto;}
.hg-rsvp-dj-av img{width:100%;height:100%;object-fit:cover;display:block;}
.hg-rsvp-close{
  position:absolute;top:14px;right:14px;z-index:3;
  appearance:none;background:rgba(244,236,218,0.10);border:0;
  font-size:0.95rem;line-height:1;cursor:pointer;color:var(--ts-paper, #ECE6D8);
  width:34px;height:34px;border-radius:99px;
  display:inline-flex;align-items:center;justify-content:center;
  flex-shrink:0;font-weight:600;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:background 0.15s,transform 0.1s;
}
.hg-rsvp-close:hover{background:rgba(244,236,218,0.18);transform:scale(1.04);}

/* Head row — title on the left (65%) + compact flyer thumbnail on
   the right (35%). The flyer is small by default; tapping opens
   the lightbox to expand. */
/* Head-row is now a 2-column grid where the LEFT column stacks the
   title + the date rail, and the RIGHT column holds a taller flyer
   thumbnail that spans the full height. The rail's bottom edge lines
   up with the bottom of the flyer because both columns stretch
   together. 34% flyer leaves the left column wide enough for ~3
   pills + the scroll-forward chevron. */
.hg-rsvp-head-row{
  display:grid; grid-template-columns:1fr 34%;
  gap:14px; align-items:stretch;
  margin:0 0 12px;
}
.hg-rsvp-head-row .hg-rsvp-head-left{
  display:flex; flex-direction:column; gap:12px;
  min-width:0;
}
.hg-rsvp-head-row .hg-rsvp-head{
  margin-bottom:0; padding-right:0;
  display:flex; flex-direction:column; justify-content:center;
  min-width:0;
}

/* Compact flyer thumbnail — fills the right-side 35% column. In the
   empty state shows the dashed-border placeholder; when a date is
   picked it flips to the solid banner image. Tapping opens the
   lightbox to expand. */
.hg-rsvp-flyer-mini{
  display:flex; align-items:center; justify-content:center;
  margin:0; padding:0;
  border-radius:10px; background:rgba(244,236,218,0.04);
  border:1.5px dashed rgba(244,236,218,0.18);
  text-decoration:none; color:inherit; max-width:100%;
  transition:background 0.15s, border-color 0.15s;
  position:relative; cursor:zoom-in;
  min-width:0; aspect-ratio:1/1; overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(244,236,218,0.04);
}
/* Tall variant: drop the fixed 1:1 aspect ratio and stretch to fill
   the grid cell height (which is set by the title + rail stack in
   the sibling left column). Keeps the bottom edge aligned with the
   bottom of the date rail. */
.hg-rsvp-flyer-mini--tall{
  aspect-ratio:auto;height:100%;align-self:stretch;
}
.hg-rsvp-flyer-mini.is-empty{cursor:default;}
.hg-rsvp-flyer-mini.has-img{
  border-style:solid; border-color:rgba(244,236,218,0.14);
  background:var(--ts-ink, #0D0B09);
  cursor:zoom-in;
}
.hg-rsvp-flyer-mini:not(.is-empty):hover{
  border-color:var(--ts-teal-300, #6FAFAE);
}
.hg-rsvp-flyer-mini-thumb{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--ts-ink, #0D0B09);
}
.hg-rsvp-flyer-mini.has-img .hg-rsvp-flyer-mini-thumb{
  background:var(--ts-ink, #0D0B09);
}
/* Mini-flyer halftone filter removed per design — the dot pattern
   was muddying flyers with already-dark / busy artwork. Keep the
   ::after pseudo-element selector in case some future paint reads
   it, but render nothing. */
.hg-rsvp-flyer-mini-thumb::after,
.hg-rsvp-flyer-mini.has-img .hg-rsvp-flyer-mini-thumb::after{display:none;}
.hg-rsvp-flyer-mini-img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block;
}
.hg-rsvp-flyer-mini-img[hidden]{display:none;}
.hg-rsvp-flyer-mini-placeholder{
  color:rgba(244,236,218,0.4);
  /* Stack the (now-empty by default) icon row above the hint text
     so the hint anchors to the bottom-left of the placeholder
     while keeping the dashed-border placeholder unchanged. */
  display:flex;align-items:flex-end;justify-content:flex-start;
  position:absolute;inset:0;padding:14px;
  z-index:1;
}
/* "Select date to begin" hint inside the empty-state placeholder.
   Arrow points LEFT toward the pill rail in the head's left column,
   which is the only target the visitor can act on in the empty
   state. Mono uppercase keeps it on-brand. */
.hg-rsvp-flyer-mini-hint{
  display:inline-flex;flex-direction:column;align-items:flex-start;gap:6px;
  font-family:var(--mono, 'Archivo Narrow', monospace);
  font-size:0.58rem;letter-spacing:0.18em;text-transform:uppercase;
  line-height:1.25;color:rgba(244,236,218,0.7);
  text-align:left;
}
.hg-rsvp-flyer-mini-hint i{
  font-size:1.4rem;color:var(--ts-teal-300, #6FAFAE);line-height:1;
  /* Subtle slide-in to draw the eye toward the pills. */
  animation:hg-rsvp-hint-arrow 1.6s ease-in-out infinite;
}
@keyframes hg-rsvp-hint-arrow{
  0%,100%{transform:translateX(0);}
  50%{transform:translateX(-4px);}
}
.hg-rsvp-flyer-mini.has-img .hg-rsvp-flyer-mini-placeholder{display:none;}
/* Zoom badge sits in the bottom-right corner of the thumbnail and
   pulses subtly on hover when the flyer is ready. Ink-tinted blur
   chip per the v2 design so it floats over any flyer art. */
.hg-rsvp-flyer-mini-zoom{
  position:absolute; right:6px; bottom:6px; z-index:4;
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:50%;
  background:rgba(13,11,9,0.7); color:var(--ts-paper, #ECE6D8);
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  transition:opacity 0.15s, transform 0.15s;
}
.hg-rsvp-flyer-mini.is-empty .hg-rsvp-flyer-mini-zoom{
  opacity:0.45;
}
.hg-rsvp-flyer-mini:not(.is-empty):hover .hg-rsvp-flyer-mini-zoom{
  transform:scale(1.08);
}

/* Locked-state thumbnail — banner hidden behind a dark lock veil so
   anon viewers know a flyer exists but is members-only. The whole
   mini-flyer is still clickable; tapping opens the lightbox in
   members-only mode (no image, just the Sign-in CTA). */
.hg-rsvp-flyer-mini.is-locked{
  border-style:solid; border-color:rgba(244,236,218,0.18);
  background:var(--ts-ink, #0D0B09); cursor:zoom-in;
}
.hg-rsvp-flyer-mini.is-locked .hg-rsvp-flyer-mini-thumb{
  background:var(--ts-ink, #0D0B09);
}
.hg-rsvp-flyer-mini.is-locked .hg-rsvp-flyer-mini-placeholder,
.hg-rsvp-flyer-mini.is-locked .hg-rsvp-flyer-mini-date{display:none;}
.hg-rsvp-flyer-mini-lock{
  position:absolute; inset:0; z-index:3;
  display:flex; align-items:center; justify-content:center;
  color:var(--ts-paper, #ECE6D8);
  background:radial-gradient(circle at center, rgba(13,11,9,0.55), rgba(13,11,9,0.82));
}
.hg-rsvp-flyer-mini.is-locked .hg-rsvp-flyer-mini-zoom{
  display:inline-flex !important;
  background:var(--ts-teal, #1F8C8C);
  opacity:1 !important;
  box-shadow:0 4px 10px -4px rgba(0,0,0,0.6) !important;
}

/* "Has-date" state — a date is picked but the event has no banner_url.
   Ink card with paper text shows the weekday + day number so the user
   gets visual confirmation. Replaces the legacy teal fill. */
.hg-rsvp-flyer-mini.has-date{
  border-style:solid; border-color:rgba(244,236,218,0.18);
  background:var(--ts-ink, #0D0B09); cursor:default;
}
.hg-rsvp-flyer-mini.has-date .hg-rsvp-flyer-mini-thumb{
  background:var(--ts-ink, #0D0B09);
}
.hg-rsvp-flyer-mini.has-date .hg-rsvp-flyer-mini-placeholder{display:none;}
.hg-rsvp-flyer-mini-date{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  color:var(--ts-paper, #ECE6D8); gap:2px; padding:6px;
  position:relative; z-index:1;
}
.hg-rsvp-flyer-mini-date-wd{
  font-family:var(--mono, 'Archivo Narrow'), monospace;
  font-size:0.58rem; font-weight:500;
  letter-spacing:0.22em; text-transform:uppercase;
  color:var(--ts-teal-300, #6FAFAE);
}
.hg-rsvp-flyer-mini-date-num{
  font-family:var(--slab, 'Archivo Black'), sans-serif;
  font-weight:400; font-size:1.65rem; line-height:1;
  letter-spacing:-0.02em;
  color:var(--ts-paper, #ECE6D8);
}
.hg-rsvp-flyer-mini.has-date .hg-rsvp-flyer-mini-zoom{
  display:none;
}

/* Flyer lightbox — full-screen overlay above everything when the
   user taps the mini flyer to expand. Easy close via X button or
   scrim click. Sits at z-index above the modal + header. */
.hg-rsvp-lightbox{
  position:fixed; inset:0; z-index:9999;
  background:rgba(8,7,6,0.92);
  display:none; align-items:center; justify-content:center;
  padding:32px; cursor:zoom-out;
  opacity:0; transition:opacity 0.2s ease;
}
.hg-rsvp-lightbox.is-open{display:flex; opacity:1;}
.hg-rsvp-lightbox-img{
  max-width:min(720px, 100%); max-height:calc(100dvh - 80px);
  object-fit:contain; border-radius:14px;
  box-shadow:0 30px 80px -20px rgba(0,0,0,0.7);
  cursor:default;
}
.hg-rsvp-lightbox-close{
  position:absolute; top:18px; right:18px;
  width:42px; height:42px; border-radius:50%;
  background:var(--ts-paper-hi, #F0EADC); color:var(--ts-ink, #14110E);
  border:0; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--mono, 'Archivo Narrow'), monospace;
  font-size:1.4rem; line-height:1;
  box-shadow:0 8px 22px -8px rgba(0,0,0,0.5);
  transition:transform 0.12s, background 0.15s;
}
.hg-rsvp-lightbox-close:hover{background:#fff; transform:scale(1.06);}
.hg-rsvp-lightbox-hint{
  position:absolute; bottom:18px; left:50%; transform:translateX(-50%);
  font-family:var(--mono, 'Archivo Narrow'), monospace;
  font-size:0.66rem; letter-spacing:0.22em; text-transform:uppercase;
  color:rgba(244,236,218,0.55);
}

/* Members-only lightbox panel — replaces the image when the user taps
   a locked flyer thumbnail. Lock icon + headline + Sign-in CTA. */
.hg-rsvp-lightbox-locked{
  display:none;
  flex-direction:column; align-items:center; justify-content:center;
  gap:14px; text-align:center; padding:32px;
  color:var(--ts-paper-hi, #F0EADC);
  max-width:min(440px, calc(100% - 48px));
}
.hg-rsvp-lightbox.is-members-only .hg-rsvp-lightbox-img{display:none;}
.hg-rsvp-lightbox.is-members-only .hg-rsvp-lightbox-locked{display:flex;}
.hg-rsvp-lightbox-locked-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:84px; height:84px; border-radius:50%;
  background:rgba(244,236,218,0.08);
  border:1.5px solid rgba(244,236,218,0.24);
  color:var(--ts-teal-300, #6FAFAE);
  margin-bottom:6px;
}
.hg-rsvp-lightbox-locked-tag{
  font-family:var(--mono, 'Archivo Narrow'), monospace;
  font-size:0.66rem; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--ts-teal-300, #6FAFAE);
}
.hg-rsvp-lightbox-locked-h{
  font-family:var(--slab, 'Archivo Black'), sans-serif;
  font-weight:400; font-size:clamp(1.4rem, 4vw, 1.85rem);
  line-height:1.12; letter-spacing:-0.01em;
  color:var(--ts-paper-hi, #F0EADC);
  max-width:18ch;
}
.hg-rsvp-lightbox-locked-cta{
  display:inline-flex; align-items:center; justify-content:center;
  margin-top:6px; padding:14px 26px;
  border-radius:999px;
  background:var(--ts-teal, #1F8C8C); color:#fff;
  border:1.5px solid var(--ts-teal, #1F8C8C);
  font-family:var(--mono, 'Archivo Narrow'), monospace;
  font-size:0.78rem; font-weight:500; letter-spacing:0.18em;
  text-transform:uppercase; text-decoration:none;
  box-shadow:0 4px 0 var(--ts-teal-700, #0F5F62);
  transition:transform 0.15s, box-shadow 0.2s, background 0.15s;
}
.hg-rsvp-lightbox-locked-cta:hover{
  background:var(--ts-teal-600, #1B7F7F);
  transform:translateY(-1px);
  box-shadow:0 5px 0 var(--ts-teal-700, #0F5F62);
}
.hg-rsvp-lightbox-locked-link{
  font-family:var(--mono, 'Archivo Narrow'), monospace;
  font-size:0.62rem; letter-spacing:0.2em; text-transform:uppercase;
  color:rgba(244,236,218,0.65); text-decoration:underline;
  text-decoration-color:rgba(244,236,218,0.3);
  text-underline-offset:3px;
}
.hg-rsvp-lightbox-locked-link:hover{color:var(--ts-paper-hi, #F0EADC);}

/* Two-column body — flyer (left) + form column (right). Collapses
   to single column under 760px. */
.hg-rsvp-body{
  display:grid; grid-template-columns:minmax(220px,1fr) 1.7fr;
  gap:20px; align-items:stretch; margin-top:10px;
}
@media(max-width:760px){
  .hg-rsvp-body{ grid-template-columns:1fr; }
}

/* Big flyer aside is retired in favour of the inline mini-flyer +
   lightbox. Keep the rule for backward compat but hide it. */
.hg-rsvp-flyer{display:none;}
.hg-rsvp-flyer-legacy{
  position:relative; min-height:280px; border-radius:18px;
  background:var(--ts-paper-2, #E3DCC9);
  border:1.5px dashed rgba(20,17,14,0.20);
  display:none; align-items:center; justify-content:center;
  overflow:hidden;
  transition:border-color 0.18s, background 0.18s;
}
.hg-rsvp-flyer.has-img{
  border-style:solid; border-color:var(--ts-ink, #14110E);
  background:var(--ts-noir, #0D0B09); padding:0;
}
.hg-rsvp-flyer-img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block;
}
.hg-rsvp-flyer-empty{
  text-align:center; padding:24px; max-width:240px;
  display:flex; flex-direction:column; align-items:center; gap:14px;
}
.hg-rsvp-flyer.has-img .hg-rsvp-flyer-empty{ display:none; }
.hg-rsvp-flyer-icon{
  width:44px; height:44px; border-radius:50%;
  background:rgba(20,17,14,0.06);
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--ts-ink-soft, #6B6258);
}
.hg-rsvp-flyer-tag{
  font-family:var(--mono, 'Archivo Narrow'), monospace;
  font-size:0.66rem; font-weight:500; letter-spacing:0.22em;
  text-transform:uppercase; color:var(--ts-ink-soft, #6B6258);
  display:inline-flex; align-items:center; gap:8px;
}
.hg-rsvp-flyer-tag::before{
  content:''; width:18px; height:1.5px; background:var(--ts-ink-soft, #6B6258);
}
.hg-rsvp-flyer-cap{
  font-family:var(--slab, 'Archivo Black'), sans-serif;
  font-weight:400; font-size:1.05rem; line-height:1.15;
  letter-spacing:-0.005em; color:var(--ts-ink, #14110E);
}

/* Event rail — horizontal scrolling row of compact date pills, one
   per upcoming event. Replaces the old Thursday / Weekend segmented
   control so Sat / Sun / future programmes get their own slot
   instead of being rolled into a "weekend" bucket. */
.hg-rsvp-rail-wrap{
  margin:0;padding:0;
  display:flex;align-items:center;gap:6px;
  min-width:0;
}
.hg-rsvp-rail-scroll{
  flex:1 1 auto;min-width:0;
  /* overflow-x:clip lets us keep horizontal scroll bounds without
     forcing overflow-y:auto (which would clip the 3 px teal-700
     underbar shadow on .hg-rsvp-evpill.is-on). Overflow-y:visible
     lets the shadow bleed below. */
  overflow-x:auto;overflow-y:visible;-webkit-overflow-scrolling:touch;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  /* No extra bottom padding — .hg-rsvp-rail already gives 10px
     bottom padding (matches its 10px top) which covers the active
     pill's 3px teal-700 underbar shadow. */
}
.hg-rsvp-rail-scroll::-webkit-scrollbar{display:none;}
.hg-rsvp-rail{
  display:flex;gap:6px;align-items:stretch;width:max-content;
}
.hg-rsvp-rail .hg-rsvp-evpill{scroll-snap-align:start;}
/* Scroll-forward chevron — pinned to the right edge of the rail
   wrap. Blends into the dark sheet (no circle, no border, just a
   faded glyph) so the rail keeps reading as "Thu / Fri / Sat …"
   without the heavy circle button stealing focus. Tapping
   scrolls the rail by ~3 pills. */
.hg-rsvp-rail-nav{
  flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:34px;
  background:transparent;
  color:rgba(244,236,218,0.42);
  border:0;padding:0;
  text-decoration:none;cursor:pointer;
  transition:color 0.15s, transform 0.1s;
}
.hg-rsvp-rail-nav:hover{
  color:var(--ts-teal-300, #6FAFAE);
  transform:translateX(1px);
}
.hg-rsvp-rail-nav i{font-size:1.15rem;line-height:1;}
.hg-rsvp-rail-nav[disabled]{
  opacity:0.2;cursor:not-allowed;pointer-events:none;
}
.hg-rsvp-rail-empty{
  font-family:var(--mono, 'Archivo Narrow', monospace);font-size:0.66rem;
  letter-spacing:0.16em;text-transform:uppercase;color:rgba(244,236,218,0.45);
  padding:10px 4px;
}
.hg-rsvp-evpill{
  appearance:none;border:1.5px solid rgba(255,255,255,0.28);background:transparent;
  cursor:pointer;border-radius:999px;padding:8px 11px;text-align:center;
  font-family:var(--mono, 'Archivo Narrow', monospace);font-weight:500;
  font-size:0.66rem;letter-spacing:0.14em;text-transform:uppercase;
  color:#fff;transition:background 0.15s,color 0.15s,border-color 0.15s,transform 0.1s;
  white-space:nowrap;flex-shrink:0;display:inline-flex;align-items:baseline;gap:5px;
  line-height:1;min-height:36px;position:relative;
}
.hg-rsvp-evpill small{
  font-family:var(--slab, 'Archivo Black'), sans-serif;
  font-weight:400;font-size:0.82rem;letter-spacing:-0.005em;
  color:#fff;text-transform:none;
}
.hg-rsvp-evpill:hover{border-color:rgba(255,255,255,0.55);color:#fff;}
.hg-rsvp-evpill.is-on{
  background:var(--ts-teal-300, #6FAFAE);color:var(--ts-ink, #0D0B09);
  border-color:var(--ts-teal-300, #6FAFAE);
  box-shadow:0 3px 0 var(--ts-teal-700, #0F5F62);
}
.hg-rsvp-evpill.is-on small{color:var(--ts-ink, #0D0B09);}
/* Multi-event marker — dual teal/rust dots inside the pill, single
   span paints both via the second box-shadow stack. Lives next to the
   day number, anchored to the right of the pill. */
.hg-rsvp-evpill .hg-rsvp-evpill-multi{
  display:inline-block;width:5px;height:5px;border-radius:99px;
  background:var(--ts-teal-300, #6FAFAE);
  box-shadow:0 0 0 2px var(--ts-ink, #0D0B09),
             8px 0 0 -2px var(--ts-rust-300, #ECA983),
             8px 0 0 0 var(--ts-ink, #0D0B09);
  margin-left:6px;align-self:center;flex:0 0 auto;
}
.hg-rsvp-evpill.is-on .hg-rsvp-evpill-multi{
  background:var(--ts-ink, #0D0B09);
  box-shadow:0 0 0 2px var(--ts-teal-300, #6FAFAE),
             8px 0 0 -2px var(--ts-rust, #EA6A2C),
             8px 0 0 0 var(--ts-teal-300, #6FAFAE);
}
.hg-rsvp-evpill--featured{border-color:rgba(234,106,44,0.45);}
.hg-rsvp-evpill--featured.is-on{
  background:var(--ts-teal-300, #6FAFAE);
  border-color:var(--ts-teal-300, #6FAFAE);
  box-shadow:0 3px 0 var(--ts-teal-700, #0F5F62);
}
.hg-rsvp-evpill-star{color:var(--ts-rust-300, #ECA983);font-size:0.78em;}
.hg-rsvp-evpill--featured.is-on .hg-rsvp-evpill-star{color:var(--ts-rust, #EA6A2C);}
.hg-rsvp-evpill--ghost{
  background:transparent;border-style:dashed;
  color:rgba(244,236,218,0.55);
  text-decoration:none;
}
.hg-rsvp-evpill--ghost:hover{
  background:rgba(244,236,218,0.04);
  border-color:rgba(244,236,218,0.4);
  color:var(--ts-paper, #ECE6D8);
}
/* Locked pill — members-only Thursdays for anonymous viewers. The pill
   reads as muted with a lock icon; clicking navigates to register. */
.hg-rsvp-evpill--locked{
  text-decoration:none;
  background:rgba(244,236,218,0.03);
  color:rgba(244,236,218,0.45);
  border-color:rgba(244,236,218,0.12);
  display:inline-flex;align-items:center;gap:6px;
}
.hg-rsvp-evpill--locked svg{
  color:rgba(244,236,218,0.45);flex:0 0 auto;
  margin-right:2px;
}
.hg-rsvp-evpill--locked small{
  color:rgba(244,236,218,0.55);
}
.hg-rsvp-evpill--locked:hover{
  background:rgba(111,175,174,0.10);
  border-color:var(--ts-teal-300, #6FAFAE);
  color:var(--ts-teal-300, #6FAFAE);
}
.hg-rsvp-evpill--locked:hover svg,
.hg-rsvp-evpill--locked:hover small{color:var(--ts-teal-300, #6FAFAE);}

.hg-rsvp-form{display:flex;flex-direction:column;gap:8px;}
.hg-rsvp-form .ts-form-g{display:flex;flex-direction:column;min-width:0;}
/* First/Last and Email/Phone always share a row, even on phones —
   tighter padding + smaller font on the fields below keeps them
   fitting on iPhone SE / Galaxy widths. Uniform 8 px gap matches
   the form's vertical row spacing so the grid reads as a square
   rhythm in both axes. */
.hg-rsvp-form .ts-form-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
/* Ticket selector row — 3 cells: tier dropdown | qty | total.
   Tier takes whatever's left; qty + total are fixed narrow
   columns so the total never wraps for $9999. */
.hg-rsvp-form .hg-rsvp-type-row{grid-template-columns:1fr 64px 84px;gap:8px;align-items:end;}
.hg-rsvp-form .hg-rsvp-tier-cell{min-width:0;}
.hg-rsvp-form .hg-rsvp-qty-cell{min-width:0;}
.hg-rsvp-form .hg-rsvp-total-cell{min-width:0;}
.hg-rsvp-form .hg-rsvp-total{
  width:100%;padding:11px 10px;
  background:rgba(244,236,218,0.06);
  border:1px solid rgba(244,236,218,0.18);
  border-radius:99px;
  font-family:var(--mono, 'Archivo Narrow', monospace);
  font-weight:500;font-size:0.82rem;letter-spacing:0.04em;
  color:var(--ts-paper-hi, #F0EADC);text-align:center;line-height:1;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.hg-rsvp-form .hg-rsvp-tier-select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  width:100%;padding:10px 34px 10px 14px;
  background:rgba(244,236,218,0.06);
  border:1px solid rgba(244,236,218,0.18);
  border-radius:99px;
  font-family:var(--mono, 'Archivo Narrow', monospace);
  font-size:0.78rem;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--ts-paper-hi, #F0EADC);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23ECE6D8' stroke-width='1.5'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  cursor:pointer;
}
.hg-rsvp-form .hg-rsvp-tier-select:focus{
  outline:none;border-color:var(--ts-teal-300, #6FAFAE);
}
/* Force explicit colors on the option elements — mobile Chrome /
   Safari render <option>s with the OS dark-mode default, which on
   a dark sheet means dark-on-dark and the tier text disappears. */
.hg-rsvp-form .hg-rsvp-tier-select option{
  background:var(--ts-ink, #0D0B09);
  color:var(--ts-paper-hi, #F0EADC);
}
@media(max-width:600px){
  /* Form gap stays uniform 8 px on phones too (per design call —
     row and column spacing should match for a consistent grid
     rhythm). Inputs already trim padding via the override below. */
  .hg-rsvp-form{gap:8px;}
  .hg-rsvp-form .ts-form-row{gap:8px;}
  .hg-rsvp-form input,.hg-rsvp-form select,.hg-rsvp-form textarea{
    padding:8px 14px;
  }
}
.hg-rsvp-form label{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.hg-rsvp-form input,.hg-rsvp-form select,.hg-rsvp-form textarea{
  appearance:none;border:1.5px solid rgba(244,236,218,0.18);
  border-radius:999px;padding:11px 16px;font:inherit;font-size:0.88rem;
  background:rgba(244,236,218,0.04);color:var(--ts-paper, #ECE6D8);
  font-family:var(--body, 'Inter', sans-serif);font-weight:500;
  transition:border-color 0.15s,background 0.15s,box-shadow 0.15s;
  min-width:0;
}
@media(max-width:600px){
  .hg-rsvp-form input,.hg-rsvp-form select,.hg-rsvp-form textarea{
    padding:9px 14px;font-size:0.84rem;
  }
}
.hg-rsvp-form input::placeholder,.hg-rsvp-form textarea::placeholder{
  color:rgba(244,236,218,0.4);font-weight:400;opacity:1;
}
.hg-rsvp-form select{
  background-image:linear-gradient(45deg,transparent 50%,rgba(244,236,218,0.55) 50%),linear-gradient(135deg,rgba(244,236,218,0.55) 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;
  padding-right:38px;
}
.hg-rsvp-form input:hover,.hg-rsvp-form select:hover,.hg-rsvp-form textarea:hover{
  background:rgba(244,236,218,0.06);
  border-color:rgba(244,236,218,0.28);
}
.hg-rsvp-form input:focus,.hg-rsvp-form select:focus,.hg-rsvp-form textarea:focus{
  outline:none;border-color:var(--ts-teal-300, #6FAFAE);
  background:rgba(244,236,218,0.08);
  box-shadow:0 0 0 3px rgba(111,175,174,0.22);
}
/* Two-button RSVP type picker.  Same visual rhythm as the date pills
   above (cream pill with ink border, rust fill on selected) so the
   sheet reads as one coherent picker stack. */
.hg-rsvp-form .hg-rsvp-type-label{
  /* The .hg-rsvp-form label rule above hides labels visually; keep
     that for this hidden control accessibility note too. */
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.hg-rsvp-type-group{
  display:grid;grid-template-columns:1fr 1fr;gap:6px;
}
.hg-rsvp-type-btn{
  appearance:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  padding:12px 16px;border-radius:999px;
  background:transparent;
  border:1.5px solid rgba(244,236,218,0.18);
  color:rgba(244,236,218,0.75);text-align:center;
  font-family:var(--mono, 'Archivo Narrow', monospace);
  transition:border-color 0.15s,background 0.15s,box-shadow 0.15s,transform 0.1s, color 0.15s;
}
.hg-rsvp-type-btn:hover{
  border-color:rgba(244,236,218,0.4);
  color:var(--ts-paper, #ECE6D8);
}
.hg-rsvp-type-btn.is-on{
  background:var(--ts-paper, #ECE6D8);color:var(--ts-ink, #0D0B09);
  border-color:var(--ts-paper, #ECE6D8);
  box-shadow:0 3px 0 #b8ad94;
}
.hg-rsvp-type-btn-h{
  font-family:var(--mono, 'Archivo Narrow', monospace);
  font-weight:500;font-size:0.7rem;letter-spacing:0.18em;
  text-transform:uppercase;
}
.hg-rsvp-type-btn-sub{
  font-size:0.62rem;line-height:1.2;
  color:rgba(244,236,218,0.4);font-weight:500;
}
.hg-rsvp-type-btn.is-on .hg-rsvp-type-btn-sub{color:rgba(13,11,9,0.55);}
.hg-rsvp-price{
  /* Price card retired — tier dropdown above now carries the
     "<TIER> — $X" label. Force hidden so legacy JS that flips
     priceWrap.hidden = false can't accidentally re-show it. */
  display:none !important;
  align-items:baseline;justify-content:space-between;
  margin:14px 0 -2px;padding:12px 16px;
  background:rgba(234,106,44,0.10);
  border:1px solid rgba(234,106,44,0.32);
  border-radius:14px;
  font-family:var(--mono, 'Archivo Narrow', monospace);
  color:var(--ts-paper-hi, #F0EADC);
}
.hg-rsvp-price-label{
  font-size:0.62rem;letter-spacing:0.22em;text-transform:uppercase;
  color:var(--ts-rust-300, #ECA983);
}
.hg-rsvp-price-amt{
  font-family:var(--slab, 'Archivo Black'), sans-serif;
  font-weight:400;font-size:1.4rem;letter-spacing:-0.01em;
  color:#fff;
}

/* ── Payment-method picker (Square card / Interac e-Transfer) ──
   Two stacked outlined cards above the submit row. Revealed when
   the picked tier carries a non-zero price. Selected state gets
   a rust accent + filled radio. */
.hg-rsvp-paymethod{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:14px 0 6px;}
.hg-rsvp-paymethod[hidden]{display:none;}
/* Section heading so the picker has chrome before any radio is
   clicked. Spans both grid columns so the row of pills sits flush
   underneath. */
.hg-rsvp-paymethod::before{
  content:'Payment method';
  grid-column:1 / -1;
  font-family:var(--mono, 'Archivo Narrow'), monospace;
  font-size:0.62rem;letter-spacing:0.22em;text-transform:uppercase;
  color:rgba(236,230,216,0.55);
}
/* Reset the visually-hidden treatment .hg-rsvp-form label gets at
   the top of this stylesheet — these aren't accessibility-only
   labels, they're the actual pickable pills. Without this override
   the pills collapse to 1×1 px and only the section ::before
   "Payment method" heading shows up on screen. */
.hg-rsvp-form label.hg-rsvp-paymethod-opt{
  position:static;width:auto;height:auto;
  /* Tighter padding + gap so two pills fit on a single row at
     mobile widths (≈360 px viewport). */
  padding:10px 12px;margin:0;border-radius:12px;
  overflow:visible;clip:auto;white-space:normal;
  display:flex;align-items:center;gap:8px;cursor:pointer;
  background:rgba(244,236,218,0.08);
  border:1px solid rgba(244,236,218,0.30);
  transition:background 0.15s,border-color 0.15s;
  min-width:0;
}
/* Higher-specificity overrides for the radio dots: the global
   .hg-rsvp-form input rule (line ~900) sets padding 11px 16px +
   border-radius 999px which renders these as full-width teal pills
   instead of 18px circles. Specificity .hg-rsvp-form .hg-rsvp-
   paymethod-opt > input[type="radio"] (0,3,1) beats it. */
.hg-rsvp-form .hg-rsvp-paymethod-opt > input[type="radio"]{
  appearance:none;-webkit-appearance:none;
  width:18px;height:18px;flex:none;
  padding:0;margin:0;border-radius:99px;
  border:2px solid rgba(244,236,218,0.45);
  background:transparent;cursor:pointer;position:relative;
  font-size:0;
}
.hg-rsvp-form .hg-rsvp-paymethod-opt > input[type="radio"]:checked{
  border-color:var(--ts-rust, #EA6A2C);
}
.hg-rsvp-form .hg-rsvp-paymethod-opt > input[type="radio"]:checked::after{
  content:'';position:absolute;inset:3px;border-radius:99px;background:var(--ts-rust, #EA6A2C);
}
.hg-rsvp-paymethod-opt:has(input:checked){
  background:rgba(234,106,44,0.10);
  border-color:rgba(234,106,44,0.40);
}
.hg-rsvp-paymethod-card{display:flex;flex-direction:column;gap:2px;min-width:0;overflow:hidden;}
.hg-rsvp-paymethod-title{
  font-family:var(--body, 'Inter'),sans-serif;font-weight:600;
  font-size:0.85rem;color:var(--ts-paper-hi, #F0EADC);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.hg-rsvp-paymethod-sub{
  font-family:var(--mono, 'Archivo Narrow'), monospace;
  font-size:0.56rem;letter-spacing:0.08em;text-transform:uppercase;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  color:rgba(236,230,216,0.55);
}

/* ── e-Transfer instructions panel ──
   Revealed under the picker when e-Transfer is the selected radio.
   Cream-paper card on noir so the credentials read as "the info
   block you copy from" rather than chrome. */
.hg-rsvp-etransfer{
  margin:8px 0 0;padding:14px 16px 12px;
  background:var(--ts-paper-hi, #F0EADC);color:var(--ts-ink, #0E0E10);
  border-radius:14px;
  font-family:var(--body, 'Inter'), sans-serif;font-size:0.86rem;line-height:1.45;
}
.hg-rsvp-etransfer-row{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:5px 0;
  border-bottom:1px dashed rgba(14,14,16,0.16);
}
.hg-rsvp-etransfer-row:last-of-type{border-bottom:0;}
.hg-rsvp-etransfer-k{
  font-family:var(--mono, 'Archivo Narrow'), monospace;
  font-size:0.65rem;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--ts-ink-mute, #5C5852);flex:none;
}
.hg-rsvp-etransfer-v{font-weight:500;color:var(--ts-ink, #0E0E10);text-align:right;
  user-select:all;-webkit-user-select:all;}
.hg-rsvp-etransfer-v strong{font-weight:700;}
.hg-rsvp-etransfer-total .hg-rsvp-etransfer-k{color:var(--ts-rust-deep, #C9551F);}
.hg-rsvp-etransfer-total .hg-rsvp-etransfer-v{font-family:var(--slab, 'Archivo Black'), sans-serif;
  font-weight:400;font-size:1.1rem;color:var(--ts-rust-deep, #C9551F);}
.hg-rsvp-etransfer-note{
  margin:10px 0 0;padding-top:10px;
  border-top:1px solid rgba(14,14,16,0.10);
  font-size:0.74rem;line-height:1.45;color:var(--ts-ink-mute, #5C5852);
}
.hg-rsvp-etransfer-note strong{color:var(--ts-rust-deep, #C9551F);font-weight:700;}

.hg-rsvp-submit-row{
  /* The "Event" secondary pill is hidden (display:none on the markup),
     so the row is a single full-width column and the submit button
     stretches edge-to-edge on every viewport, including mobile. */
  display:grid;grid-template-columns:1fr;gap:8px;align-items:stretch;
  margin-top:14px;
}
.hg-rsvp-submit-row .hg-rsvp-submit{margin-top:0;width:100%;}
/* View event — brand-kit secondary pill: paper-cream fill on ink
   border, mono uppercase. Matches the "schedbtn" style used on the
   homepage (paper-hi background, ink text, soft shadow) per the
   linq brand kit so it reads as a real button next to the teal
   submit, not as a stranded outline glyph. */
.hg-rsvp-view{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--ts-paper-hi, #F0EADC);
  color:var(--ts-ink, #0D0B09);
  border:1.5px solid var(--ts-paper-hi, #F0EADC);
  border-radius:999px;
  padding:0 14px;text-decoration:none;cursor:pointer;
  font-family:var(--mono, 'Archivo Narrow', monospace);
  font-weight:500;font-size:0.7rem;letter-spacing:0.2em;text-transform:uppercase;
  line-height:1;white-space:nowrap;
  box-shadow:0 4px 0 rgba(14,14,16,0.55),0 14px 28px -10px rgba(0,0,0,0.55);
  transition:transform 0.1s,background 0.15s,box-shadow 0.15s;
}
.hg-rsvp-view:hover{background:#fff;border-color:#fff;transform:translateY(-1px);}
.hg-rsvp-view:active{transform:translateY(2px);box-shadow:0 2px 0 rgba(14,14,16,0.55);}
.hg-rsvp-submit{
  display:block;width:100%;margin-top:14px;
  background:var(--ts-teal, #1F8C8C);color:#fff;border:1.5px solid var(--ts-teal, #1F8C8C);
  border-radius:999px;padding:20px 22px;cursor:pointer;line-height:1;
  font-family:var(--mono, 'Archivo Narrow', monospace);font-weight:500;font-size:0.85rem;
  letter-spacing:0.22em;text-transform:uppercase;
  box-shadow:0 4px 0 var(--ts-teal-700, #0F5F62),0 14px 28px -10px rgba(31,140,140,.55);
  transition:background 0.15s,transform 0.1s,box-shadow 0.15s, opacity 0.15s;
}
.hg-rsvp-submit.is-disabled-look{
  /* Retained for back-compat — submit is always clickable now. */
  opacity:1;
}
.hg-rsvp-submit:hover:not(:disabled){background:var(--ts-teal-600, #1B7F7F);border-color:var(--ts-teal-600, #1B7F7F);transform:translateY(-1px);box-shadow:0 5px 0 var(--ts-teal-700, #0F5F62),0 18px 32px -10px rgba(31,140,140,.6);}
.hg-rsvp-submit:active:not(:disabled){transform:translateY(2px);box-shadow:0 2px 0 var(--ts-teal-700, #0F5F62);}
.hg-rsvp-submit:disabled{opacity:0.7;cursor:wait;}
.hg-rsvp-foot{
  /* Foot copy retired — keep the rule for back-compat in case any
     downstream call site removes the [hidden] attribute, but force
     display:none so the text never shows. The submit button label
     carries the pending state now. */
  display:none !important;
  margin-top:6px;text-align:center;
  font-family:var(--mono, 'Archivo Narrow', monospace);font-size:0.6rem;letter-spacing:0.22em;
  text-transform:uppercase;color:rgba(244,236,218,0.45);
}

/* INK redesign: active date pill + active type toggle = paper-on-noir
   with a 3px ink-warm underbar shadow. The mini-flyer "has-date" state
   keeps its own ink fill via the rule above — no !important override
   needed here. The legacy cream/teal override block was removed when
   the sheet flipped to noir. */

/* Inline Square checkout (feature-flagged). Sits beside the form
   inside .hg-rsvp-body — toggled in/out by the Buy tickets handler
   when the backend returns payment_mode='inline'.
   The [hidden] attribute rules are CRITICAL: without them,
   .hg-rsvp-inline-pay's display:flex would override the HTML
   `hidden` attribute and the empty Square panel + success state
   would render permanently below the form on every sheet open
   (visible in the screenshot from the post-merge bug). */
.hg-rsvp-inline-pay[hidden],
.hg-rsvp-inline-success[hidden]{display:none!important;}
.hg-rsvp-inline-pay{
  display:flex;flex-direction:column;gap:12px;
  padding:14px 16px;
  border:1px solid rgba(244,236,218,0.14);
  border-radius:14px;
  /* Square's SDK injects its own light-themed iframe — keep the
     wrapper paper so the iframe doesn't clip awkwardly on noir. */
  background:var(--ts-paper, #ECE6D8);color:var(--ts-ink, #0D0B09);
  margin-top:8px;
}
.hg-rsvp-inline-pay-head{display:flex;flex-direction:column;gap:2px;}
.hg-rsvp-inline-pay-amount{
  font:700 18px/1.2 'Public Sans',system-ui,sans-serif;
  color:var(--ts-ink, #0D0B09);
}
.hg-rsvp-inline-pay-sub{
  font:500 11px/1.2 'Archivo Narrow',monospace;
  letter-spacing:0.08em;text-transform:uppercase;
  color:#3A4250;
}
.hg-rsvp-inline-pay-card{min-height:90px;}
.hg-rsvp-inline-pay-card iframe{width:100%!important;}
.hg-rsvp-inline-pay-msg{
  font-size:13px;line-height:1.4;color:#D14848;
  padding:6px 8px;border-radius:6px;background:rgba(209,72,72,0.08);
}
.hg-rsvp-inline-pay-msg.is-info{color:var(--ts-ink, #0D0B09);background:rgba(13,11,9,0.06);}
.hg-rsvp-inline-pay-actions{
  display:grid;grid-template-columns:auto 1fr;gap:8px;align-items:center;
}
.hg-rsvp-inline-pay-cancel{
  background:transparent;border:1px solid rgba(13,11,9,0.18);
  color:var(--ts-ink, #0D0B09);border-radius:999px;
  padding:10px 16px;font:600 13px 'Archivo Narrow',monospace;
  letter-spacing:0.18em;text-transform:uppercase;
  cursor:pointer;
}
.hg-rsvp-inline-pay-cancel:hover{background:rgba(13,11,9,0.05);}
.hg-rsvp-inline-pay-note{
  font-size:11px;line-height:1.3;color:#3A4250;text-align:center;
}
.hg-rsvp-inline-success{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:24px 16px;text-align:center;
  border:1px solid rgba(244,236,218,0.14);border-radius:14px;
  background:rgba(244,236,218,0.04);
}
.hg-rsvp-inline-success-tick{
  width:48px;height:48px;border-radius:50%;
  background:var(--ts-teal, #1F8C8C);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:26px;font-weight:700;
}
.hg-rsvp-inline-success-title{
  font:400 22px/1 var(--slab, 'Archivo Black', sans-serif);
  letter-spacing:-0.01em;color:var(--ts-paper, #ECE6D8);
}
.hg-rsvp-inline-success-code{
  font:600 13px/1.2 'Archivo Narrow',monospace;
  letter-spacing:0.18em;color:var(--ts-teal-300, #6FAFAE);
  padding:6px 12px;background:rgba(244,236,218,0.06);border-radius:99px;
}
.hg-rsvp-inline-success-sub{
  font-size:13px;line-height:1.5;color:rgba(244,236,218,0.65);max-width:280px;
}

/* ════════════════════════════════════════════════════════════════════
   CHOOSER STATE — replaces the form when the picked day has multiple
   events and the user hasn't committed to one yet. JS toggles the
   `[hidden]` attribute on .hg-rsvp-chooser; siblings (head row, mini
   flyer, form) get .is-chooser on the modal card so they collapse.
   ════════════════════════════════════════════════════════════════════ */
.hg-rsvp-chooser[hidden]{display:none!important;}
.hg-rsvp-modal.is-chooser .hg-rsvp-head-row,
.hg-rsvp-modal.is-chooser .hg-rsvp-body{display:none;}
.hg-rsvp-chooser{
  display:flex;flex-direction:column;gap:14px;
  padding:6px 0 4px;
}
.hg-rsvp-chooser-head{
  display:flex;flex-direction:column;gap:6px;padding-top:6px;
}
.hg-rsvp-chooser-eyebrow{
  font-family:var(--mono, 'Archivo Narrow', monospace);font-size:0.66rem;font-weight:500;
  letter-spacing:0.22em;text-transform:uppercase;
  color:var(--ts-teal-300, #6FAFAE);
  display:inline-flex;align-items:center;gap:8px;
}
.hg-rsvp-chooser-eyebrow::before{
  content:'';width:18px;height:1.5px;background:var(--ts-teal-300, #6FAFAE);
}
.hg-rsvp-chooser-title{
  font-family:var(--slab, 'Archivo Black', sans-serif);font-weight:400;
  font-size:clamp(1.6rem, 4.2vw, 2rem);line-height:0.95;letter-spacing:-0.01em;
  color:var(--ts-paper, #ECE6D8);margin:0;
}
.hg-rsvp-chooser-title-em{
  font-family:var(--serif, 'Instrument Serif', Georgia, serif);
  font-style:italic;font-weight:400;
  color:var(--ts-teal-300, #6FAFAE);
  font-size:0.78em;margin-left:6px;letter-spacing:0;
}
.hg-rsvp-chooser-sub{
  font-family:var(--mono, 'Archivo Narrow', monospace);font-size:0.62rem;
  letter-spacing:0.22em;text-transform:uppercase;
  color:rgba(244,236,218,0.55);
  display:inline-flex;align-items:center;gap:6px;
}
.hg-rsvp-chooser-sub-dot{
  display:inline-block;width:6px;height:6px;border-radius:99px;
  background:var(--ts-teal-300, #6FAFAE);
}
.hg-rsvp-ev-list{
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:8px;
}
.hg-rsvp-ev-row{
  display:grid;grid-template-columns:72px minmax(0,1fr) 24px;gap:14px;
  align-items:center;
  background:rgba(244,236,218,0.04);
  border:1.5px solid rgba(244,236,218,0.14);border-radius:14px;
  padding:10px;color:var(--ts-paper, #ECE6D8);
  font-family:var(--body, 'Inter', sans-serif);text-align:left;
  cursor:pointer;width:100%;
  transition:border-color 0.15s, background 0.15s, transform 0.15s;
  min-width:0;
}
.hg-rsvp-ev-row:hover{
  background:rgba(244,236,218,0.07);
  border-color:rgba(244,236,218,0.28);
}
.hg-rsvp-ev-row:active{transform:scale(0.992);}
.hg-rsvp-ev-row:focus-visible{
  outline:none;border-color:var(--ts-teal-300, #6FAFAE);
  box-shadow:0 0 0 3px rgba(111,175,174,0.22);
}
.hg-rsvp-ev-mini{
  width:72px;aspect-ratio:0.72/1;border-radius:8px;overflow:hidden;
  background:var(--ts-ink, #0D0B09);position:relative;display:block;
  box-shadow:inset 0 0 0 1px rgba(244,236,218,0.08);
  flex:0 0 auto;
}
.hg-rsvp-ev-mini::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(circle, #000 1px, transparent 1.4px);
  background-size:3px 3px;mix-blend-mode:multiply;opacity:0.55;z-index:2;
}
.hg-rsvp-ev-mini-img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;z-index:1;
}
.hg-rsvp-ev-mini-fb{
  position:absolute;inset:0;padding:7px 6px;z-index:1;
  display:flex;flex-direction:column;justify-content:flex-end;
  font-family:var(--slab, 'Archivo Black'), sans-serif;
  color:var(--ts-paper, #ECE6D8);line-height:0.95;
}
.hg-rsvp-ev-mini-fb-t1{font-size:10px;letter-spacing:-0.005em;}
.hg-rsvp-ev-mini-fb-t2{font-size:10px;letter-spacing:-0.005em;color:var(--ts-rust, #EA6A2C);}
.hg-rsvp-ev-body{
  display:flex;flex-direction:column;gap:2px;min-width:0;
}
.hg-rsvp-ev-num{
  font-family:var(--mono, 'Archivo Narrow', monospace);font-size:0.56rem;
  letter-spacing:0.22em;text-transform:uppercase;
  color:var(--ts-teal-300, #6FAFAE);
}
.hg-rsvp-ev-name{
  font-family:var(--slab, 'Archivo Black'), sans-serif;font-weight:400;
  font-size:1.05rem;line-height:1;letter-spacing:-0.005em;
  color:var(--ts-paper, #ECE6D8);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.hg-rsvp-ev-djs{
  font-family:var(--slab, 'Archivo Black'), sans-serif;font-weight:400;
  font-size:0.78rem;letter-spacing:0;line-height:1.15;
  color:var(--ts-paper, #ECE6D8);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.hg-rsvp-ev-djs em{
  font-style:normal;color:rgba(244,236,218,0.55);
  font-family:var(--mono, 'Archivo Narrow', monospace);
  font-size:0.62rem;letter-spacing:0.16em;text-transform:uppercase;
}
.hg-rsvp-ev-meta{
  font-family:var(--mono, 'Archivo Narrow', monospace);font-size:0.56rem;
  letter-spacing:0.18em;text-transform:uppercase;
  color:rgba(244,236,218,0.5);margin-top:3px;
  display:flex;align-items:center;gap:6px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.hg-rsvp-ev-meta-dot{
  display:inline-block;width:5px;height:5px;border-radius:99px;
  background:var(--ts-teal-300, #6FAFAE);flex:0 0 auto;
}
.hg-rsvp-ev-chev{
  font-family:var(--slab, 'Archivo Black'), sans-serif;font-size:1rem;
  color:rgba(244,236,218,0.55);justify-self:end;line-height:1;
}

/* ════════════════════════════════════════════════════════════════════
   BACK-PILL — shown above the head row in committed state when the
   picked day still has sibling events the user could choose from.
   ════════════════════════════════════════════════════════════════════ */
.hg-rsvp-back-pill{
  align-self:flex-start;margin:0 0 8px;
  font-family:var(--mono, 'Archivo Narrow', monospace);
  font-size:0.6rem;letter-spacing:0.18em;text-transform:uppercase;
  background:rgba(244,236,218,0.06);
  color:rgba(244,236,218,0.75);
  border:1px solid rgba(244,236,218,0.14);border-radius:99px;
  padding:7px 12px 7px 10px;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;line-height:1;
  transition:background 0.15s,border-color 0.15s,color 0.15s;
}
.hg-rsvp-back-pill[hidden]{display:none!important;}
.hg-rsvp-back-pill:hover{
  background:rgba(244,236,218,0.10);
  border-color:rgba(244,236,218,0.28);
  color:var(--ts-paper, #ECE6D8);
}
.hg-rsvp-back-pill-arrow{font-size:0.95em;line-height:1;}