<!--
  Gathering Hour: Browse Gatherings page
  Created: 2026-08-11
  Notes: No hero photo, the collection provides the imagery. Two sections:
  "Ready to Host" (live gatherings, big 2-col cards, fully clickable) and
  "Coming Soon" (concept cards, 3-col, open a waitlist modal instead of
  linking to an empty product page).
  Updated 2026-08-12: waitlist submissions are now wired to Klaviyo for
  real, client-side, using the account's public API key (safe to expose,
  it can only create profiles/events, see KLAVIYO_PUBLIC_KEY near the
  bottom of this file). Each submission fires a "Joined Gathering
  Waitlist" event tagged with the gathering name (so the same person can
  join multiple gatherings' waitlists separately, nothing gets
  overwritten) and subscribes the profile to the existing "waitlist" list
  for consent/unsubscribe handling. No backend server required.
  Updated 2026-08-13: added a 9th Coming Soon card (Christmas Party) and
  fixed image top-alignment across the Coming Soon grid by wrapping each
  card's name/meta in a fixed-height .soon-header. Swapped the Baby Shower
  placeholder card for Sicilian Aperitivo using the thumbnail already live
  on the homepage.

  Open question for Sarah, flagged rather than guessed at:
  "Apartment Café" appears both here (as a waitlist concept) and on the
  homepage's Gatherings grid (as a dedicated "Coming soon" card linking
  to /apartment-cafe.html). Reused the same photo for consistency, but
  worth deciding whether that one should keep its own page or fold into
  this waitlist system too.

  2026-08-14: rebuilt after this file disappeared from the outputs folder
  between sessions. Reconstructed from this session's own conversation
  history. Everything from the header comment down through the Coming
  Soon grid, footer content, and modal markup is reproduced exactly as
  last approved. The Coming Soon section's own eyebrow/headline (above
  the card grid) and the modal's visual styling weren't captured verbatim
  in the parts of this file I'd re-read, so those two pieces are rebuilt
  fresh in the same voice and design system rather than guessed
  word-for-word, worth a quick look to confirm they still match what you
  remember.

  2026-08-14, later same day: hero headline converted to the site's new
  two-tone treatment (see styles.css), "Find your next" stays italic
  aubergine, "gathering." is now bold tomato Archivo Black.

  2026-08-17: added a new "Closer" section right after the Coming Soon
  grid's "ask block" and before the newsletter cta-band, using the new
  shared .closer-band component (see styles.css), same aubergine
  full-bleed pattern as FAQ's "Still stuck?" band. Copy is Sarah's exact
  wording ("Found one you love? Put it on the calendar."), eyebrow
  "Decision time" is drafted, not specified by her, flag if it should
  read differently. Button reads "Choose a Gathering →" and links to
  #ready (the top of this same page's Ready to Host grid), since this
  page IS the gathering-choosing page, there's nowhere else to send
  someone. Second of two rollout spots, alongside the homepage.

  2026-08-18: applied the new Gathering Hour Web Type Scale (see
  styles.css). This page wasn't on Sarah's exception list (only
  homepage/How It Works/About/Founding Friends kept their 2026-08-17
  bump), so .gh-hero-headline's two spans (62px/56px mismatched, sized
  independently of that bump round) unified to 52px/52px (Hero tier),
  mobile went from 42px/38px mismatched to 40px/40px. .card-status,
  shared with Painting Kit's identical "ready-card" component, matched
  to the shared 13px/700/0.14em eyebrow spec, 12px mobile added.
  .ready-name/.soon-name 24px/19px -> both 20px (H3/card-title tier,
  same value now used for this exact card pattern everywhere it appears:
  here, the homepage's Gatherings grid, and Painting Kit). .modal-title
  26px -> 20px (Subheading tier, matches other modal headlines site-wide
  like Painting Kit's cart-prompt modal). Body/meta copy floored:
  .gh-hero-body, .ask-line, .modal-sub -> 16px (body); .ready-meta,
  .soon-meta, .soon-desc, .soon-waitlist, .modal-error, .modal-fineprint
  -> 14px (meta), several were sitting at 10.5-12.5px. .modal-close (the
  "x" glyph) and .modal-form-row input left alone, decorative/UI chrome.

  2026-08-19, later same day: eyebrow reduction pass, per the new
  sitewide rule (max 1-2 per page, banners exempt). Cut the hero's
  "Gatherings" eyebrow and the Coming Soon section's own "Coming soon"
  eyebrow, both redundant, the hero already sits under the page
  headline/nav/title, and every card in that grid already carries its
  own "Coming soon" .card-status tag. Kept every .card-status tag
  ("Ready to host"/"Coming soon"), those are functional per-card status
  UI, not decorative page eyebrows. Kept the closer band's "Decision
  time" and the newsletter band's "From Gathering Hour", both inside
  aubergine/pink banners, exempt per Sarah's rule.

  2026-08-19, later same day: new sitewide corner-radius system (see
  styles.css). This page's photography (Ready to Host and Coming Soon
  grid photos) had inline border-radius:4px reduced to 2px, matching
  the new "editorial photography stays near-square" rule. .modal-box
  (already 8px) left as-is, matches the new small-not-bubbly card
  standard.

  2026-08-20: fixed the two-tone hero headline's second line running on
  the same line as the first instead of breaking. .gh-hero-headline
  .hl-italic/.hl-black never got display: block, which every other
  page sets per the shared two-tone headline pattern (see styles.css).
  Same bug found and fixed sitewide today (Contact, Activity Kits, FAQ,
  Founding Friends, Order Tracking, Privacy & Terms, Shipping &
  Returns).

  2026-08-21: sitewide Flamingo Estate rollout. The shared .closer-band
  now defaults to paper instead of aubergine (see styles.css), so the
  "Decision time" eyebrow lost its banner-exemption and is cut. Footer
  dropped its now-meaningless divider-top class (garnet footer color
  reads as its own break).
  2026-08-21, later same day: migrated every i.imgur.com image reference
  on this page to Shopify's own file library (cdn.shopify.com), after
  discovering Imgur has been fully blocked in the UK since September
  2025 (an Online Safety Act/ICO issue with Imgur's parent company,
  not a temporary glitch) and has also had spotty blocks elsewhere
  (Taiwan uploads). Imgur was only ever meant as a placeholder host
  during early build, this closes that out. Each image was re-uploaded
  via Shopify's fileCreate mutation with its existing alt text carried
  over, same photos, same alt text, just reliable hosting on
  infrastructure Gathering Hour already depends on for checkout.
  2026-08-27: footer reverted from garnet back to cream sitewide (see
  styles.css), Sarah didn't like it live. Footer here picks up the
  shared default automatically, no page-scoped CSS to change. Restored
  the divider-top class on the <footer> tag, needed again now that
  footer matches the body's cream background.

  2026-09-09: SITEWIDE ROLLOUT, third page (see how-it-works.html and
  about.html for the first two). Same pattern:
  - Nav simplified to How it works / About / Shop pill, matching the
    homepage. toggleShopMenu() removed from the closing <script> block
    (the waitlist-modal script block below is untouched, unrelated).
  - Corner radius squared off: every Ready to Host and Coming Soon grid
    photo (2px editorial-photography rounding) is now 0. The waitlist
    modal's own box/input radius (8px/6px, UI chrome, not photography or
    the card pattern this rollout has touched so far) is left as-is,
    not part of this pass.
  - Newsletter band: no page-scoped change needed, picks up the new
    aubergine default from the shared .cta-band in styles.css
    automatically.
  .card-status's orange color is untouched, that's a functional status
  label on a light card background, not the "orange on dark aubergine"
  issue this rollout has been fixing elsewhere.

2026-09-11: added the site favicon (Sarah's gh-mark-cream.png monogram, saved to /assets and rendered down to favicon.ico, 16x16, 32x32, and a 180x180 apple-touch-icon). Same four <link> tags added to every page's <head>, right after <title>.

2026-09-11, later: Golden Hour's "Ready to Host" card thumbnail swapped
from JguNgBO.jpg (candlelit table, skyline view) to z4MgD8q.jpg, the
same cheese-board-with-figs-and-olives photo golden-hour.html itself
uses as its main gallery image, per Sarah's request to match the two.
Same swap made to the Golden Hour theme-pill thumbnail on the homepage.

2026-09-16: REBUILT as an "occasion-first shop," per Sarah's reference
screenshot (labeled "1C, Occasion-first shop"). Three pieces:
- Hero: the plain-text "Find your next gathering." hero (no photo,
  cream background) is replaced by a short full-bleed gradient band
  (.gh-hero2) reusing the homepage's exact gradient and "Host
  beautifully / without the stress" headline, with new page-specific
  body copy ("Pick an occasion. We send the plan, the paper goods and
  the activity.") and no buttons -- deliberately short so the filters
  and catalog sit above the fold, per the reference's own caption.
- New "Shop by occasion" filter bar (.occ-bar): real, functional pills
  (All/Birthdays/Baby & bridal/Book club/Just because/Holidays/Kids),
  see the JS block below the nav-scroll script. Every gathering got a
  data-occasion tag based on its actual concept (Christmas Party/
  Friendsgiving/Holiday Cocktail Party/After Midnight -> holidays; The
  Birthday Table -> birthdays; Tea in the Garden -> baby-bridal +
  just-because; Wine & Cheese Club -> book-club + just-because;
  everything else that's a general-purpose gathering -> just-because).
  Nothing maps to "Kids" yet -- there's no kid-focused theme in the
  catalog today, so that filter correctly shows the new empty-state
  message rather than being force-mapped to something that doesn't fit;
  worth deciding on a real kids gathering at some point if that filter
  should ever show something.
- The old "Ready to Host" (2-col, big cards) and "Coming Soon" (3-col,
  waitlist-modal cards) sections are merged into one unified 3-col
  grid (.gath-catalog) holding all 11 real gatherings -- both live ones
  plus all 9 Coming Soon concepts, matching the reference's single
  catalog rather than two separate sections. Underlying behavior is
  unchanged: Tea in the Garden and Golden Hour are still plain links to
  their real product pages and show their real price + what's included
  ("Plan · Host box · Activity", confirmed accurate for both); every
  Coming Soon card is still a button that opens the same existing
  Klaviyo-wired waitlist modal, unchanged, just restyled -- shows
  "Coming soon" where the price goes and "Join the waitlist →" instead
  of the Plan/Host box/Activity line, since those aren't real
  purchasable add-ons for an unreleased theme. Per-card description
  copy (.soon-desc) is dropped to match the reference's more scannable,
  name+price+one-meta-line card. .card-status (the old "Ready to
  host"/"Coming soon" eyebrow tag) removed as dead CSS, that signal now
  lives in the price-vs-"Coming soon" swap instead. The "Don't see the
  gathering you're looking for?" ask-block, the Closer band (still
  anchors to #ready, kept on the new catalog section), the newsletter
  band, the footer, and the waitlist modal + its Klaviyo JS are all
  unchanged.
  FLAG for Sarah: the reference's own 6-card mockup used two names that
  aren't real gatherings ("Garden Supper", "Sunday Pancakes") -- per her
  direction, this rebuild uses all 11 real gatherings instead rather
  than inventing those two.

  2026-09-17: hero rebuilt again, from the full-bleed aubergine band
  (.gh-hero2) to the FAQ page's plain-cream, oversized-type treatment,
  per Sarah's reference screenshot. New "Find your gathering" eyebrow
  (tomato), same two-tone "Host beautifully / without the stress."
  headline, same body copy. The occasion filter pills (.occ-pill,
  unchanged markup and JS) moved out of their own .occ-bar section and
  into the hero's shared container, directly under the body copy, with
  the old "Shop by occasion" eyebrow label dropped as redundant. Overall
  vertical rhythm is deliberately tighter than FAQ's own version of this
  treatment, per Sarah's "a bit less whitespace below" note -- see the
  CSS comment above .gath-hero-section for the full reasoning.

  2026-09-17, later: sized up the headline per Sarah's explicit spec --
  this page is the reference build for an "oversized header treatment"
  she wants repeated next on How It Works, Activity Kits, FAQ, About and
  other sibling pages, so the numbers are meant to be nailed down once
  here rather than re-guessed per page. Both headline lines now share
  one clamp(52px, 9vw, 108px) size (line 1 was already there, line 2 was
  mismatched at 44px), tighter line-heights (0.92/0.9), and a near-flush
  2px gap between them (was a looser 4px). .gath-hero-section's top
  padding grew from 56px to 72px to give the much taller type room.
  Mobile font-size overrides removed -- clamp()'s own 52px floor already
  covers that. See the CSS comment above .gath-hero-section for the full
  spec and the note on copying this block to sibling pages later.

  2026-09-17, later still: pushed the headline bigger per Sarah's second,
  more precise spec -- layout and copy confirmed good as-is, size only.
  Both lines now share one clamp(2.875rem, 8vw, 7.5rem) (46-120px, was
  52-108px) with breakpoint-varying line-height (0.92 desktop / 0.95
  tablet <=1024px / 1.02 mobile <=480px, looser at small sizes since
  tight leading reads cramped once the clamp() nears its floor) and a
  proportional -0.01em letter-spacing on both lines (was an inconsistent
  absolute -1px on line 2 only). Eyebrow and subcopy explicitly left
  alone, per Sarah's note that the eyebrow's small size is what sells the
  headline as huge. See the CSS comment above .gath-hero-section for the
  full spec.

  2026-09-17, later still: 120px overshot -- Sarah caught "without the
  stress." wrapping to its own two lines (three lines total, eating the
  hero down to the filter pills) with tight 0.92 leading crowding the
  wrap. Pulled the clamp() ceiling back from 7.5rem/120px to 5.5rem/88px
  and loosened line-height to 0.98, per her explicit test: "without the
  stress." should sit on one line with a little margin, not wrapping and
  not touching the edge. Still meaningfully bigger than the original
  pre-oversized-treatment size, just not 120px. See the CSS comment
  above .gath-hero-inner h1 .hl-italic for the fallback plan if this
  still isn't right.
2026-10-03, later: Founding Friends slim module copy updated to the $59 Founding Pass.
2026-10-03, later still: four kids gatherings added to Coming to the table (Vol. 20-23: Sprinkles Birthday Party, Teddy Bear Picnic Party, To the Moon Party, In the Jungle), dated "By request", tagged Kids + Birthdays. Holiday Movie Night and Nostalgic Christmas also tagged Kids, so the Kids filter isn't empty any more.
2026-10-05: Vol. 03 named "The Dinner Party" (was the placeholder "Gathering Hour Party"): card name, photo alt, waitlist name. Also tagged Dinner so it shows under the Dinner filter.
2026-10-06, per Sarah: Founding Friends strip ("Want four? Become a Founding Friend.") moved from between the catalog and Coming to the table to the bottom of the page, after the closer and before the newsletter band.
2026-10-07, per Sarah: hero headline now "Everything you need to host. / Already planned." ("Host beautifully / without the stress." moves to the homepage hero).
2026-10-07: phones: hero line "Pick an occasion..." may now wrap (its inline nowrap made the page scroll ~10px sideways at 375px).
2026-10-08: Diwali Lights (Vol. 24) and The Witching Hour (Vol. 04, moved out of Coming to the table) added to the top grid as "Pre-order · $22", linking to their new pages.
2026-10-09: footer gets an "Affiliate Disclosure" link next to Privacy & Terms (Sarah's affiliate handoff).
2026-10-15: Sovrn Commerce (VigLink) affiliate script added before </body>.
2026-10-21: Diwali Lights card now "Available now · $22" (Sarah); The Witching Hour stays pre-order.
2026-10-22: Diwali Lights card photo is the feast spread (assets/diwali/diwali-feast-spread.jpg) instead of the invite artwork. The Witching Hour card removed from the top grid (Sarah: not happening in time this year); the-witching-hour.html kept but noindex and no longer linked.
2026-10-22 (Sarah): The Dinner Party now "Coming November"; Apartment Café "Coming soon" (pre-order planned for next week).
2026-10-22: "Decorations" (/decorations.html) added to the Shop menu and footer Shop column, after Activity Kits (Sarah).
2026-10-26 (Sarah): Diwali Lights card photo is now the page hero, brass lanterns and marigolds on red velvet (assets/diwali/diwali-lanterns-table.jpg).
2026-10-26 (Sarah): four cards on top: Tea in the Garden Vol. 01, Golden Hour Vol. 02, Diwali Lights Vol. 03 (was 24), Apartment Café Vol. 04 (was 06). The Dinner Party moves to Coming to the table as Vol. 05 (no photo); Friendsgiving becomes Vol. 06.
-->

<!DOCTYPE html>
<html lang="en">
<head>
<!-- 2026-09-21: Google Tag Manager added sitewide (container GTM-PCGXB7FK) -->
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-PCGXB7FK');</script>
<!-- End Google Tag Manager -->
<!-- 2026-09-22: Klaviyo onsite tracking added sitewide, per Sarah -- unlocks
     Viewed Product tracking for the browse-abandonment flow. The object-
     loader script goes first so klaviyo.track() calls on product pages
     don't race the async klaviyo.js load. -->
<!-- Klaviyo -->
<script type="text/javascript">
!function(){if(!window.klaviyo){window._klOnsite=window._klOnsite||[];try{window.klaviyo=new Proxy({},{get:function(n,i){return"push"===i?function(){var n;(n=window._klOnsite).push.apply(n,arguments)}:function(){for(var n=arguments.length,o=new Array(n),w=0;w<n;w++)o[w]=arguments[w];var t="function"==typeof o[o.length-1]?o.pop():void 0,e=new Promise((function(n){window._klOnsite.push([i].concat(o,[function(i){t&&t(i),n(i)}]))}));return e}}})}catch(n){window.klaviyo=window.klaviyo||[],window.klaviyo.push=function(){var n;(n=window._klOnsite).push.apply(n,arguments)}}}}();
</script>
<script type="text/javascript" async src="https://static.klaviyo.com/onsite/js/klaviyo.js?company_id=UhUBGL"></script>
<!-- End Klaviyo -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gathering Hour: Browse Gatherings</title>
<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/assets/apple-touch-icon.png">
<link rel="shortcut icon" href="/assets/favicon.ico">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;1,500;1,600&family=Archivo+Black&family=Archivo:wght@400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/styles.css?v=20261026a">
<link rel="stylesheet" href="/signup-popup.css?v=20261004a">
<style>

/* ── HERO v3, BIG TYPOGRAPHY (2026-09-17) ──
   Replaces the full-bleed aubergine band (.gh-hero2, 2026-09-16) with
   the FAQ page's plain-cream, oversized-type treatment, per Sarah's
   reference screenshot ("proposed -- oversized type, matching the FAQ
   page"). Same idea as .faq-hero-section: one shared centered container
   (.gath-hero-inner) holds the eyebrow, headline, body copy AND the
   occasion filter pills as direct children, so they can't drift out of
   alignment the way separately max-width'd elements did on FAQ before
   its 2026-08-20 fix (see that page's header comment for the full
   story). Tighter vertical rhythm than FAQ throughout -- less top
   padding, a smaller gap before the pills, minimal bottom padding --
   per Sarah's explicit "a bit less whitespace below" note: this hero is
   meant to let the catalog sit close beneath it, not fill the screen
   the way FAQ's does. The old .occ-bar's own "Shop by occasion" eyebrow
   label is dropped (redundant now that "Find your gathering" already
   frames the section, and the site's eyebrow-reduction rule caps pages
   at 1-2 eyebrows); the pills themselves (.occ-pill, data-occasion) are
   unchanged markup and unchanged JS, just moved inside this shared
   container and restyled to sit directly under the body copy. */
/* ── OVERSIZED HEADER TREATMENT (2026-09-17, sized up further same day) ──
   Reference implementation, per Sarah's explicit sizing spec, of the
   "big typography" hero to be rolled out to every sibling page (How It
   Works, Activity Kits, FAQ, About, etc.) once approved here first —
   built here on Shop Gatherings so the sizes can be checked and
   adjusted before repeating them elsewhere. When that rollout happens,
   copy this whole block verbatim (renaming .gath-hero-* to match each
   page's own prefix) rather than re-guessing the numbers per page —
   that's the point of nailing them once, here. Layout and copy are
   confirmed good as-is (Sarah: "keep that as it is") -- this pass only
   pushes the headline size further, per her second, more precise spec:
     - Eyebrow and subcopy: explicitly left alone per Sarah's ask -- the
       eyebrow's small size is what makes the headline read as huge by
       contrast, growing it would undercut the effect.
     - Headline (both lines, now truly identical treatment): one fluid
       clamp(2.875rem, 8vw, 7.5rem) -- 46px floor, 120px ceiling, was
       52-108px -- so sizing no longer snaps at a breakpoint, it scales
       continuously with viewport width. Letter-spacing tightened to a
       proportional -0.01em (was an absolute -1px on line 2 only, applied
       to neither line consistently before).
     - Line-height now varies by breakpoint rather than being one fixed
       value: 0.92 desktop (was already there for line 1, line 2 was a
       mismatched 0.9), 0.95 tablet (~768-1024px, new), 1.02 mobile
       (<=480px, new) -- tight leading that works at 120px reads cramped
       once the clamp() has scaled down near its 46px floor, so mobile
       gets explicitly looser leading rather than inheriting desktop's.
       Sarah's tablet range doesn't line up with this page's existing
       900px layout breakpoint, so these are two new, independent
       breakpoints scoped to just the headline's line-height.
     - The 2px near-flush gap between the two lines (line 2's margin-top)
       is unchanged from the previous pass.
     - Padding: .gath-hero-section's padding is the "defined once" value
       for the whole treatment's vertical rhythm -- 72px top, 28px bottom
       (set last pass), unchanged this pass. */
.gath-hero-section { padding: 72px 48px 28px; background: var(--paper); }
.gath-hero-inner { max-width: 1036px; margin: 0 auto; }
.gath-hero-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tomato); display: block; margin-bottom: 18px; }
.gath-hero-inner h1 { margin-bottom: 20px; }
.gath-hero-inner h1 .hl-italic,
.gath-hero-inner h1 .hl-black {
  /* 2026-09-17, corrected: 7.5rem/120px was overshooting -- "without the
     stress." wrapped to its own two lines, pushing the block to three
     lines total and eating the hero down to the filter pills, with
     tight 0.92 leading nearly touching the wrapped lines' ascenders/
     descenders. Pulled the ceiling back to 5.5rem/88px (Sarah's stated
     starting test point) and loosened line-height to 0.98 so "without
     the stress." sits on one line with room to spare -- still well
     above the original pre-oversized-treatment size, just not 120px.
     I can't render this page to pixel-measure the wrap point directly,
     so this is a reasoned estimate, not a measured one -- flag if it's
     still wrapping or still feels tight and I'll step it down further
     in 4px increments (84, 80, 76...) per Sarah's fallback method. */
  font-size: clamp(2.875rem, 8vw, 5.5rem);
  letter-spacing: -0.01em;
  display: block;
  line-height: 0.98;
}
.gath-hero-inner h1 .hl-black { color: var(--tomato); margin-top: 2px; }
@media (max-width: 1024px) {
  .gath-hero-inner h1 .hl-italic,
  .gath-hero-inner h1 .hl-black { line-height: 0.95; }
}
@media (max-width: 480px) {
  .gath-hero-inner h1 .hl-italic,
  .gath-hero-inner h1 .hl-black { line-height: 1.02; }
}
.gath-hero-body { font-size: 17px; color: var(--espresso-70); line-height: 1.6; max-width: 480px; margin-bottom: 28px; }
.gath-hero-inner .occ-pills { display: flex; gap: 10px; flex-wrap: wrap; }
.occ-pill {
  font-family: 'Archivo', sans-serif;
  font-size: 14px;
  font-weight: 600;
  padding: 9px 18px;
  border-radius: 100px;
  border: 1px solid var(--espresso-15);
  background: transparent;
  color: var(--espresso);
  cursor: pointer;
  transition: all 0.15s;
}
.occ-pill:hover { border-color: var(--aubergine); }
.occ-pill.active { background: var(--aubergine); border-color: var(--aubergine); color: var(--paper); }

/* ── UNIFIED CATALOG GRID (2026-09-16) ──
   Replaces the two separate "Ready to Host" (2-col, big cards, direct
   links) and "Coming Soon" (3-col, waitlist-modal buttons) sections
   with one 3-col grid holding all 11 real gatherings, per Sarah's
   reference. The underlying behavior is unchanged, just visually
   unified: live gatherings (Tea in the Garden, Golden Hour) are still
   plain <a> links straight to their product page and show a real
   price + what's included ("Plan · Host box · Activity" -- accurate
   for both, confirmed against the homepage's How It Works pricing);
   every Coming Soon gathering is still a <button onclick="openWaitlist(...)">
   opening the same existing modal, just showing "Coming soon" where
   the price would go and "Join the waitlist →" instead of the
   Plan/Host box/Activity line, since those aren't real purchasable
   add-ons for an unreleased theme yet. Per-card description copy
   (.soon-desc) is dropped -- the reference's cards are name + price/
   status + one meta line only, deliberately more scannable than the
   old grid's fuller copy. .card-status (the old "Ready to host"/
   "Coming soon" eyebrow tag) is removed as dead CSS along with it,
   the price-vs-"Coming soon" swap now carries that signal instead. */
.gath-catalog { padding: 24px 48px 16px; } /* 2026-10-01: bottom 56 -> 16, per Sarah, tighter gap before Coming to the table */
/* .gath-catalog-grid / -card / -img / -vol / -name / -tags / -status now live in styles.css (shared with how-it-works.html), 2026-10-01 */
.gath-empty { display: none; text-align: center; padding: 40px 0 8px; color: var(--espresso-50); font-size: 15px; }
.gath-empty.visible { display: block; }

/* ── "COMING TO THE TABLE" TIER (2026-09-29, rebuilt) ──
   Was a photo grid with blurred AI-placeholder images and an intro
   line explaining the blur ("real photography is still in progress").
   Per Sarah: cut that framing entirely -- telling customers you're
   waiting on real photography is production-process information and
   makes the product feel unfinished, and the blurred images were
   already the weakest visual element on the site. Replaced with a
   typographic-only card: no photography at all, so there's no
   image-quality gap to explain away. Cream background (var(--paper)),
   fine burgundy border, generous padding, large Cormorant title, one
   sentence of copy, a tiny uppercase Archivo date, and a red
   "Join the waitlist" CTA -- shorter than the photo cards above
   (220-280px vs. the 4:3 photo boxes) so the shift in treatment reads
   as a deliberate "here's what's next" rather than an unfinished gap.
   Same openWaitlist() modal as the top tier, just a different card. */
/* 2026-09-30 (v2): VOL. card system, per Sarah's mockup. Every
   upcoming gathering gets a volume number (release order is approximate,
   not a promise). Card = coloured tile with a burgundy frame, VOL. no.
   top right, big Cormorant italic title, three uppercase descriptors,
   then launch month + "Join the list" along the bottom. Colours are set
   per card with inline custom properties so each one can be tuned
   individually:  --bg (tile), --ink (all text), --cta (Join the list).
   Whole card is the button -> openWaitlist(name). */
.gath-list-section { padding: 40px 48px 56px; }
.gath-list-header { text-align: center; margin-bottom: 40px; }
.gath-list-headline .hl-italic,
.gath-list-headline .hl-black { font-size: 32px; }
.gath-list-headline .hl-black { color: var(--tomato); margin-left: 6px; }
.gath-list-intro { font-size: 16px; color: var(--espresso-70); line-height: 1.5; margin-top: 12px; }
.gath-list-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.gath-list-card {
  --bg: #FFF0DA;
  --ink: var(--aubergine);
  --cta: var(--tomato);
  /* 2026-10-01, per Sarah: rest state is a 20% tint of the card colour
     on cream (so the grid blends with the page) with burgundy text that
     reads on every tint; hover/focus fills to the full colour and swaps
     to the card's own --ink / --cta. Browsers without color-mix() just
     show the full colour. */
  background: var(--bg);
  background: color-mix(in srgb, var(--bg) 20%, var(--paper));
  color: var(--aubergine);
  border: 2px solid #5A0A2A;
  border-radius: 0;
  padding: 16px 24px 18px;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  text-align: left;
  font-family: 'Archivo', sans-serif;
  width: 100%;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.25s ease, color 0.25s ease;
}
.gath-list-card:hover,
.gath-list-card:focus-visible { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(42,27,21,0.14); background: var(--bg); color: var(--ink); }
.gath-list-card:focus-visible { outline: 2px solid var(--tomato); outline-offset: 3px; }
.gath-list-vol { align-self: flex-end; font-size: 12px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 6px; }
.gath-list-name { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 500; font-size: 46px; line-height: 0.98; margin-bottom: 12px; }
.gath-list-name small { font-size: 0.7em; }
.gath-list-tags { font-size: 11px; font-weight: 500; letter-spacing: 0.03em; text-transform: uppercase; line-height: 1.6; }
.gath-list-tags i { font-style: normal; margin: 0 5px; }
.gath-list-foot { margin-top: auto; padding-top: 14px; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 11px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; }
.gath-list-cta { color: var(--tomato); white-space: nowrap; transition: color 0.25s ease; }
.gath-list-card:hover .gath-list-cta, .gath-list-card:focus-visible .gath-list-cta { color: var(--cta); }
.gath-list-section.is-empty .gath-list-header,
.gath-list-section.is-empty .gath-list-grid { display: none; }
.gath-list-section .ask-block { margin-top: 56px; }
@media (max-width: 1200px) { .gath-list-grid { grid-template-columns: repeat(3, 1fr); } }

/* ── "DON'T SEE IT" ASK ── */
.ask-block { text-align: center; padding-top: 48px; margin-top: 8px; border-top: 0.5px solid var(--espresso-08); }
.ask-line { font-size: 16px; color: var(--espresso-70); margin-bottom: 8px; }

/* ── WAITLIST MODAL ── */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(42,27,21,0.55);
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: 24px;
}
.modal-overlay.open { display: flex; }
.modal-box { background: var(--paper); border-radius: 8px; padding: 40px; max-width: 420px; width: 100%; position: relative; }
.modal-close { position: absolute; top: 16px; right: 16px; background: none; border: none; font-size: 22px; color: var(--espresso-50); cursor: pointer; line-height: 1; }
.modal-title { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 500; font-size: 20px; color: var(--aubergine); margin-bottom: 8px; }
.modal-sub { font-size: 16px; color: var(--espresso-70); line-height: 1.5; margin-bottom: 22px; }
.modal-form-row { display: flex; flex-direction: column; gap: 12px; }
.modal-form-row input {
  padding: 12px 14px;
  border: 1px solid var(--espresso-15);
  border-radius: 6px;
  font-family: 'Archivo', sans-serif;
  font-size: 14px;
  color: var(--espresso);
  background: var(--paper);
}
.modal-form-row input:focus { outline: none; border-color: var(--aubergine); }
.modal-submit { width: 100%; }
.modal-error { font-size: 14px; color: var(--tomato); margin-top: 4px; }
.modal-fineprint { font-size: 14px; color: var(--espresso-50); margin-top: 14px; line-height: 1.5; }
.modal-confirm { text-align: center; }

@media (max-width: 900px) {
  .gath-hero-section { padding: 48px 24px 20px; }
  .gath-hero-body { white-space: normal !important; } /* 2026-10-07: the inline nowrap pushed this line ~10px past the screen edge on phones (the long-standing sideways scroll) */
  .gath-catalog { padding: 16px 24px 12px; }
  .gath-list-section { padding: 32px 24px 40px; }
  .gath-list-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
@media (max-width: 560px) {
  .gath-list-grid { grid-template-columns: 1fr; }
  .gath-list-headline .hl-italic,
  .gath-list-headline .hl-black { font-size: 26px; }
  .gath-list-card { min-height: 190px; }
  .gath-list-name { font-size: 40px; }
}

/* 2026-10-03: Groups & Teams callout above the closer */
.groups-callout { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-top: 28px; padding-bottom: 28px; border-top: 0.5px solid var(--espresso-08); }
.groups-callout-title { font-size: 16px; color: var(--body); line-height: 1.5; max-width: 640px; }
.groups-callout-title span { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 600; font-size: 22px; color: var(--name); margin-right: 6px; }
</style>
</head>
<body>

<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-PCGXB7FK"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<!-- ── NAV, SIMPLIFIED (2026-09-09) ── -->
<nav>
  <a class='nav-logo' href='/'><em>gathering</em><strong>hour</strong></a>
  <button class="nav-toggle" aria-label="Open menu" onclick="document.querySelector('nav').classList.toggle('nav-open')">
    <span></span><span></span><span></span>
  </button>
  <ul class="nav-links">
    <li><a href='/how-it-works'>How it works</a></li>
    <li><a href='/about'>About</a></li>
    <li><a href='/journal'>Journal</a></li>
    <li class="nav-shop">
      <a class='btn-pill btn-tomato' href='/gatherings' onclick='return toggleShopMenu(event)'>Shop</a>
      <div class="nav-shop-menu">
        <a href='/gatherings'>Gatherings</a>
        <a href='/activity-kits'>Activity Kits</a>
        <a href='/decorations'>Decorations</a>
        <a href='/gift-cards'>Gift Cards</a>
      </div>
    </li>
  </ul>
</nav>

<script>
// 2026-09-23, per Sarah: "Shop" nav pill becomes a dropdown again (Themes,
// Activities -- Gift Shop to follow once that's live). Reuses the
// .nav-shop/.nav-shop-menu CSS already in styles.css from the 2026-08-14
// version of this same idea (hover opens it on desktop via CSS alone;
// touch devices need this JS since :hover doesn't fire on tap). The Shop
// pill keeps its real href to gatherings.html so it still works with JS
// off or on desktop hover; on touch, tapping it just opens the menu
// instead of navigating immediately.
function toggleShopMenu(e){
  if (!window.matchMedia('(hover: none)').matches) return true;
  e.preventDefault();
  var el = e.currentTarget.closest('.nav-shop');
  if (el) el.classList.toggle('open');
  return false;
}
document.addEventListener('click', function(e){
  var open = document.querySelector('.nav-shop.open');
  if (open && !open.contains(e.target)) open.classList.remove('open');
});
</script>


<!-- ── HERO v3, BIG TYPOGRAPHY (2026-09-17) ──
     Plain-cream, oversized-type hero matching the FAQ page's treatment,
     with the occasion filter pills folded into the same container --
     see CSS comment above for the full reasoning and how this replaces
     the old full-bleed .gh-hero2 band + separate .occ-bar section. -->
<section class="gath-hero-section">
  <div class="gath-hero-inner">
    <span class="gath-hero-eyebrow">Find your gathering</span>
    <h1>
      <span class="hl-italic headline-serif">Everything you need to host.</span>
      <span class="hl-black headline-black">Already planned.</span>
    </h1>
    <p class="gath-hero-body" style="white-space: nowrap; max-width: none;">Pick an occasion. We&rsquo;ll take care of the planning.</p>
    <div class="occ-pills">
      <button type="button" class="occ-pill active" data-occasion="all">All</button>
      <button type="button" class="occ-pill" data-occasion="birthdays">Birthdays</button>
      <button type="button" class="occ-pill" data-occasion="baby-bridal">Baby &amp; bridal</button>
      <button type="button" class="occ-pill" data-occasion="dinner">Dinner</button>
      <button type="button" class="occ-pill" data-occasion="just-because">Just because</button>
      <button type="button" class="occ-pill" data-occasion="holidays">Holidays</button>
      <button type="button" class="occ-pill" data-occasion="kids">Kids</button>
    </div>
  </div>
</section>

<!-- ── UNIFIED CATALOG GRID (2026-09-16) ──
     2026-09-30: trimmed to 3 (Tea in the Garden, Golden Hour, 29 Again)
     per Sarah; everything else lives in the VOL. cards below.
     Was: all 11 real gatherings (2 live + 9 Coming Soon) in one grid, per
     Sarah's reference -- see CSS comment above for the full writeup on
     what changed vs. the old two-section layout and why. id="ready"
     kept on this section since the Closer band below still links to
     #ready. -->
<section class="gath-catalog" id="ready">
  <div class="gath-catalog-grid">

    <a class='gath-catalog-card' data-occasion='birthdays baby-bridal just-because' href='/tea-in-the-garden'>
      <div class="gath-catalog-img">
        <span class="gath-catalog-vol">Vol. 01</span>
        <img src="/assets/tea-in-the-garden-table.jpg" alt="Tea in the Garden, garden table with Victoria sponge, tiered stands, blue and white china and hydrangeas">
      </div>
      <span class="gath-catalog-name">Tea in the Garden</span>
      <span class="gath-catalog-tags">Brunch <i>&middot;</i> 6–12 guests <i>&middot;</i> Year&#8209;round</span>
      <span class="gath-catalog-status is-now">Available now &middot; From $22</span>
    </a>

    <a class='gath-catalog-card' data-occasion='birthdays dinner just-because' href='/golden-hour'>
      <div class="gath-catalog-img">
        <span class="gath-catalog-vol">Vol. 02</span>
        <img src="https://cdn.shopify.com/s/files/1/0749/3504/2202/files/gathering-hour-z4MgD8q.jpg?v=1787475892" alt="Golden Hour, cheese board with figs, olives and brie">
      </div>
      <span class="gath-catalog-name">Golden Hour</span>
      <span class="gath-catalog-tags">Dinner <i>&middot;</i> 6–12 guests <i>&middot;</i> Year&#8209;round</span>
      <span class="gath-catalog-status is-now">Available now &middot; From $22</span>
    </a>

    <!-- 2026-10-08: Diwali Lights and The Witching Hour on pre-order (Plan only, no Host Box yet). 2026-10-22: The Witching Hour card removed (Sarah: not doable in time this year); its page stays, unlinked and noindex. -->
    <a class='gath-catalog-card' data-occasion='holidays dinner birthdays' href='/diwali-lights'>
      <div class="gath-catalog-img">
        <span class="gath-catalog-vol">Vol. 03</span>
        <img src="/assets/diwali/diwali-lanterns-table.jpg" alt="Brass lanterns with candles on an engraved tray, ringed with marigolds and red roses, on a red velvet cloth under a ribbon garland">
      </div>
      <span class="gath-catalog-name">Diwali Lights</span>
      <span class="gath-catalog-tags">Festive feast <i>&middot;</i> 6–18 guests <i>&middot;</i> Autumn</span>
      <span class="gath-catalog-status is-now">Available now &middot; $22</span>
    </a>

    <button type="button" class="gath-catalog-card" data-occasion="birthdays just-because" onclick="openWaitlist('Apartment Café')">
      <div class="gath-catalog-img">
        <span class="gath-catalog-vol">Vol. 04</span>
        <img src="/assets/apartment-cafe-fall.jpg" alt="Apartment Café fall edition, pastries, scones and pumpkin bread on a kitchen counter">
      </div>
      <span class="gath-catalog-name">Apartment Café</span>
      <span class="gath-catalog-tags">Brunch <i>&middot;</i> 6–10 guests <i>&middot;</i> Fall</span>
      <span class="gath-catalog-status is-coming">Coming soon</span>
    </button>

  </div>

  <p class="gath-empty" id="gathEmptyMsg">No gatherings for this occasion yet. Check back soon, or tell us what you're looking for below.</p>

</section>

<!-- ── COMING TO THE TABLE ──
     2026-09-30: VOL. card system (see CSS comment above
     .gath-list-section). Colours per card via inline --bg/--ink/--cta.
     "Don't see the gathering..." ask moved here from the top section.
     History: 09-29 typographic cards, before that a blurred-photo grid. -->
<section class="gath-list-section">
  <div class="gath-list-header">
    <h2 class="gath-list-headline">
      <span class="hl-italic headline-serif">Coming</span>
      <span class="hl-black headline-black">to the table.</span>
    </h2>
    <p class="gath-list-intro">A first look at the gatherings we&rsquo;re working on. Choose one to join the list.</p>
  </div>
  <div class="gath-list-grid">

    <!-- 2026-10-26 (Sarah): The Dinner Party moved here from the top row (no photo), Vol. 05. -->
    <button type="button" class="gath-list-card" style="--bg:#3A0020; --ink:#FFF7EE; --cta:#FF2A1F;" data-occasion="dinner birthdays just-because" onclick="openWaitlist('The Dinner Party')" aria-label="Vol. 05, The Dinner Party, November 2026. Join the list">
      <span class="gath-list-vol">Vol. 05</span>
      <span class="gath-list-name">The Dinner Party</span>
      <span class="gath-list-tags">Evening <i>&middot;</i> 6–12 guests <i>&middot;</i> Year&#8209;round</span>
      <span class="gath-list-foot"><span>November 2026</span><span class="gath-list-cta">Join the list &rarr;</span></span>
    </button>

    <button type="button" class="gath-list-card" style="--bg:#DD5600; --ink:#FFF7EE; --cta:#FF2A1F;" data-occasion="holidays dinner" onclick="openWaitlist('Friendsgiving')" aria-label="Vol. 06, Friendsgiving, October 2026. Join the list">
      <span class="gath-list-vol">Vol. 06</span>
      <span class="gath-list-name">Friendsgiving</span>
      <span class="gath-list-tags">Dinner <i>&middot;</i> Friends <i>&middot;</i> Fall</span>
      <span class="gath-list-foot"><span>October 2026</span><span class="gath-list-cta">Join the list &rarr;</span></span>
    </button>


    <button type="button" class="gath-list-card" style="--bg:#FFBDCB;" data-occasion="holidays dinner" onclick="openWaitlist('The Holiday')" aria-label="Vol. 07, The Holiday, October 2026. Join the list">
      <span class="gath-list-vol">Vol. 07</span>
      <span class="gath-list-name">The Holiday</span>
      <span class="gath-list-tags">Dinner <i>&middot;</i> 4–8 guests <i>&middot;</i> Holiday</span>
      <span class="gath-list-foot"><span>October 2026</span><span class="gath-list-cta">Join the list &rarr;</span></span>
    </button>

    <button type="button" class="gath-list-card" style="--bg:#FF8C99;" data-occasion="holidays" onclick="openWaitlist('Christmas Cocktails')" aria-label="Vol. 08, Christmas Cocktails, November 2026. Join the list">
      <span class="gath-list-vol">Vol. 08</span>
      <span class="gath-list-name">Christmas Cocktails</span>
      <span class="gath-list-tags">Cocktail hour <i>&middot;</i> 6–12 guests <i>&middot;</i> Holiday</span>
      <span class="gath-list-foot"><span>November 2026</span><span class="gath-list-cta">Join the list &rarr;</span></span>
    </button>

    <button type="button" class="gath-list-card" style="--bg:#930033; --ink:#FFF7EE; --cta:#FFF7EE;" data-occasion="holidays kids" onclick="openWaitlist('Nostalgic Christmas')" aria-label="Vol. 09, Nostalgic Christmas, November 2026. Join the list">
      <span class="gath-list-vol">Vol. 09</span>
      <span class="gath-list-name">Nostalgic Christmas</span>
      <span class="gath-list-tags">Lunch <i>&middot;</i> 6–12 guests <i>&middot;</i> Holiday</span>
      <span class="gath-list-foot"><span>November 2026</span><span class="gath-list-cta">Join the list &rarr;</span></span>
    </button>

    <button type="button" class="gath-list-card" style="--bg:#FF8C99;" data-occasion="holidays just-because kids" onclick="openWaitlist('Holiday Movie Night')" aria-label="Vol. 10, Holiday Movie Night, November 2026. Join the list">
      <span class="gath-list-vol">Vol. 10</span>
      <span class="gath-list-name">Holiday Movie Night</span>
      <span class="gath-list-tags">Evening <i>&middot;</i> 4–8 guests <i>&middot;</i> Winter</span>
      <span class="gath-list-foot"><span>November 2026</span><span class="gath-list-cta">Join the list &rarr;</span></span>
    </button>

    <button type="button" class="gath-list-card" style="--bg:#7A6E0A; --ink:#FFF7EE; --cta:#FF2A1F;" data-occasion="birthdays dinner just-because" onclick="openWaitlist('Wine &amp; Cheese Club')" aria-label="Vol. 11, Wine & Cheese Club, December 2026. Join the list">
      <span class="gath-list-vol">Vol. 11</span>
      <span class="gath-list-name">Wine &amp; Cheese Club</span>
      <span class="gath-list-tags">Evening <i>&middot;</i> Friends <i>&middot;</i> Fall</span>
      <span class="gath-list-foot"><span>December 2026</span><span class="gath-list-cta">Join the list &rarr;</span></span>
    </button>

    <button type="button" class="gath-list-card" style="--bg:#0B1838; --ink:#FFF7EE; --cta:#FF2A1F;" data-occasion="birthdays holidays dinner" onclick="openWaitlist('NYE 2027')" aria-label="Vol. 12, NYE 2027, November 2026. Join the list">
      <span class="gath-list-vol">Vol. 12</span>
      <span class="gath-list-name">NYE 2027</span>
      <span class="gath-list-tags">Dinner <i>&middot;</i> Friends <i>&middot;</i> Fall</span>
      <span class="gath-list-foot"><span>November 2026</span><span class="gath-list-cta">Join the list &rarr;</span></span>
    </button>

    <button type="button" class="gath-list-card" style="--bg:#C8CCEC;" data-occasion="birthdays just-because" onclick="openWaitlist('The Reset')" aria-label="Vol. 13, The Reset, December 2026. Join the list">
      <span class="gath-list-vol">Vol. 13</span>
      <span class="gath-list-name">The Reset</span>
      <span class="gath-list-tags">Brunch <i>&middot;</i> 4–8 guests <i>&middot;</i> Winter</span>
      <span class="gath-list-foot"><span>December 2026</span><span class="gath-list-cta">Join the list &rarr;</span></span>
    </button>

    <button type="button" class="gath-list-card" style="--bg:#D9C934;" data-occasion="birthdays just-because" onclick="openWaitlist('Mocktail Club')" aria-label="Vol. 14, Mocktail Club, December 2026. Join the list">
      <span class="gath-list-vol">Vol. 14</span>
      <span class="gath-list-name">Mocktail Club</span>
      <span class="gath-list-tags">Evening <i>&middot;</i> 6–12 guests <i>&middot;</i> Year&#8209;round</span>
      <span class="gath-list-foot"><span>December 2026</span><span class="gath-list-cta">Join the list &rarr;</span></span>
    </button>

    <button type="button" class="gath-list-card" style="--bg:#FFD484;" data-occasion="birthdays" onclick="openWaitlist('29 Again Birthday')" aria-label="Vol. 15, 29 Again Birthday, November 2026. Join the list">
      <span class="gath-list-vol">Vol. 15</span>
      <span class="gath-list-name">29 Again Birthday</span>
      <span class="gath-list-tags">Evening <i>&middot;</i> 6–12 guests <i>&middot;</i> Year&#8209;round</span>
      <span class="gath-list-foot"><span>November 2026</span><span class="gath-list-cta">Join the list &rarr;</span></span>
    </button>

    <button type="button" class="gath-list-card" style="--bg:#FFBDCB;" data-occasion="birthdays holidays just-because" onclick="openWaitlist('Galentines')" aria-label="Vol. 16, Galentines, January 2027. Join the list">
      <span class="gath-list-vol">Vol. 16</span>
      <span class="gath-list-name">Galentines</span>
      <span class="gath-list-tags">Evening <i>&middot;</i> 6–12 guests <i>&middot;</i> Valentines</span>
      <span class="gath-list-foot"><span>January 2027</span><span class="gath-list-cta">Join the list &rarr;</span></span>
    </button>

    <button type="button" class="gath-list-card" style="--bg:#7A6E0A; --ink:#FFF7EE; --cta:#FF2A1F;" data-occasion="dinner just-because" onclick="openWaitlist('Cookbook Club')" aria-label="Vol. 17, Cookbook Club, Spring 2027. Join the list">
      <span class="gath-list-vol">Vol. 17</span>
      <span class="gath-list-name">Cookbook Club</span>
      <span class="gath-list-tags">Dinner <i>&middot;</i> 6–10 guests <i>&middot;</i> Year&#8209;round</span>
      <span class="gath-list-foot"><span>Spring 2027</span><span class="gath-list-cta">Join the list &rarr;</span></span>
    </button>

    <button type="button" class="gath-list-card" style="--bg:#FF913A;" data-occasion="birthdays dinner just-because" onclick="openWaitlist('Sicilian Aperitivo')" aria-label="Vol. 18, Sicilian Aperitivo, Spring 2027. Join the list">
      <span class="gath-list-vol">Vol. 18</span>
      <span class="gath-list-name">Sicilian Aperitivo</span>
      <span class="gath-list-tags">Dinner <i>&middot;</i> 6–12 guests <i>&middot;</i> Year&#8209;round</span>
      <span class="gath-list-foot"><span>Spring 2027</span><span class="gath-list-cta">Join the list &rarr;</span></span>
    </button>

    <button type="button" class="gath-list-card" style="--bg:#FFBDCB;" data-occasion="birthdays baby-bridal just-because" onclick="openWaitlist('Flower Club')" aria-label="Vol. 19, Flower Club, Spring 2027. Join the list">
      <span class="gath-list-vol">Vol. 19</span>
      <span class="gath-list-name">Flower Club</span>
      <span class="gath-list-tags">Dinner <i>&middot;</i> 6–12 guests <i>&middot;</i> Year&#8209;round</span>
      <span class="gath-list-foot"><span>Spring 2027</span><span class="gath-list-cta">Join the list &rarr;</span></span>
    </button>
  <!-- 2026-10-03: kids gatherings, no date yet ("By request"). -->
    <button type="button" class="gath-list-card" style="--bg:#FF8C99;" data-occasion="kids birthdays" onclick="openWaitlist('Sprinkles Birthday Party')" aria-label="Vol. 20, Sprinkles Birthday Party, by request. Join the list">
      <span class="gath-list-vol">Vol. 20</span>
      <span class="gath-list-name">Sprinkles Birthday Party</span>
      <span class="gath-list-tags">Kids&rsquo; party <i>&middot;</i> Birthdays <i>&middot;</i> Year&#8209;round</span>
      <span class="gath-list-foot"><span>By request</span><span class="gath-list-cta">Join the list &rarr;</span></span>
    </button>

    <button type="button" class="gath-list-card" style="--bg:#FFD484;" data-occasion="kids birthdays" onclick="openWaitlist('Teddy Bear Picnic Party')" aria-label="Vol. 21, Teddy Bear Picnic Party, by request. Join the list">
      <span class="gath-list-vol">Vol. 21</span>
      <span class="gath-list-name">Teddy Bear Picnic Party</span>
      <span class="gath-list-tags">Kids&rsquo; party <i>&middot;</i> Birthdays <i>&middot;</i> Year&#8209;round</span>
      <span class="gath-list-foot"><span>By request</span><span class="gath-list-cta">Join the list &rarr;</span></span>
    </button>

    <button type="button" class="gath-list-card" style="--bg:#0B1838; --ink:#FFF7EE; --cta:#FF2A1F;" data-occasion="kids birthdays" onclick="openWaitlist('To the Moon Party')" aria-label="Vol. 22, To the Moon Party, by request. Join the list">
      <span class="gath-list-vol">Vol. 22</span>
      <span class="gath-list-name">To the Moon Party</span>
      <span class="gath-list-tags">Kids&rsquo; party <i>&middot;</i> Birthdays <i>&middot;</i> Year&#8209;round</span>
      <span class="gath-list-foot"><span>By request</span><span class="gath-list-cta">Join the list &rarr;</span></span>
    </button>

    <button type="button" class="gath-list-card" style="--bg:#7A6E0A; --ink:#FFF7EE; --cta:#FF2A1F;" data-occasion="kids birthdays" onclick="openWaitlist('In the Jungle')" aria-label="Vol. 23, In the Jungle, by request. Join the list">
      <span class="gath-list-vol">Vol. 23</span>
      <span class="gath-list-name">In the Jungle</span>
      <span class="gath-list-tags">Kids&rsquo; party <i>&middot;</i> Birthdays <i>&middot;</i> Year&#8209;round</span>
      <span class="gath-list-foot"><span>By request</span><span class="gath-list-cta">Join the list &rarr;</span></span>
    </button>

  </div>

  <!-- Warmer conversion moment for people who've just browsed the whole grid,
       separate intent from the general newsletter signup below. 2026-09-16:
       was href="#" (dead link, flagged by Sarah) — wired to a mailto: using
       the sitewide contact address (hello@thegatheringhour.com, same one
       used in the footer, FAQ and HostGuide) with a pre-filled subject line
       so it's a real, working action rather than a no-op click. -->
  <div class="ask-block">
    <p class="ask-line">Don't see the gathering you're looking for?</p>
    <a href="mailto:hello@thegatheringhour.com?subject=A%20gathering%20I%27d%20love%20to%20see" class="link-arrow ask-link">Tell us what you want to host →</a>
  </div>
</section>

<!-- ── GROUPS & TEAMS CALLOUT (2026-10-03, per Sarah) ── -->
<section class="groups-callout">
  <p class="groups-callout-title"><span>Planning for a group?</span> We also create Gathering Hour experiences for teams, clients and companies.</p>
  <a class='link-arrow' href='/corporate'>Groups &amp; Teams →</a>
</section>

<!-- ── CLOSER ── -->
<section class="closer-band">
  <h2 class="closer-headline">
    <span class="cl-italic">Found one you love?</span>
    <span class="cl-black">Put it on the calendar.</span>
  </h2>
  <div class="closer-btns">
    <a href="#ready" class="btn-pill btn-tomato">Choose a Gathering →</a>
  </div>
</section>

<!-- ── FOUNDING FRIENDS SLIM MODULE (2026-10-03, per Sarah; moved to the bottom of the page 2026-10-06) ── -->
<section class="ff-slim">
  <div class="ff-slim-inner">
    <h2 class="ff-slim-headline"><span class="hl-italic">Want four?</span> <span class="hl-black">Become a Founding Friend.</span></h2>
    <p class="ff-slim-body">Four Gathering Plans for $59, chosen whenever you&rsquo;re ready to host during our first year.</p>
    <a class='link-arrow' href='/founding-friends'>Learn about Founding Friends →</a>
  </div>
</section>

<!-- ── CTA / EMAIL BAND ── -->
<section class="cta-band">
  <div>
    <p class="cta-eyebrow">From Gathering Hour</p>
    <p class="cta-headline">Stay at the table.</p>
    <p class="cta-body">New gatherings, first looks and hosting inspiration.</p>
  </div>
  <div>
    <form class="cta-form" onsubmit="return false;">
      <input type="email" placeholder="Your email address" required />
      <button type="submit" class="link-arrow" style="background:none;border:none;cursor:pointer;">Join us →</button>
    </form>
      <p class="cta-consent">By signing up, you agree to receive marketing emails from Gathering Hour. Unsubscribe any time. See our <a href='/privacy-terms'>Privacy Policy</a>.</p>
    <!-- 2026-10-26 (Sarah): social icons under the sign-up, cream on burgundy -->
    <div class="cta-social">
      <a href="https://www.instagram.com/gathering.hour/" target="_blank" rel="noopener" aria-label="Gathering Hour on Instagram"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M7.0301.084c-1.2768.0602-2.1487.264-2.911.5634-.7888.3075-1.4575.72-2.1228 1.3877-.6652.6677-1.075 1.3368-1.3802 2.127-.2954.7638-.4956 1.6365-.552 2.914-.0564 1.2775-.0689 1.6882-.0626 4.947.0062 3.2586.0206 3.6671.0825 4.9473.061 1.2765.264 2.1482.5635 2.9107.308.7889.72 1.4573 1.388 2.1228.6679.6655 1.3365 1.0743 2.1285 1.38.7632.295 1.6361.4961 2.9134.552 1.2773.056 1.6884.069 4.9462.0627 3.2578-.0062 3.668-.0207 4.9478-.0814 1.28-.0607 2.147-.2652 2.9098-.5633.7889-.3086 1.4578-.72 2.1228-1.3881.665-.6682 1.0745-1.3378 1.3795-2.1284.2957-.7632.4966-1.636.552-2.9124.056-1.2809.0692-1.6898.063-4.948-.0063-3.2583-.021-3.6668-.0817-4.9465-.0607-1.2797-.264-2.1487-.5633-2.9117-.3084-.7889-.72-1.4568-1.3876-2.1228C21.2982 1.33 20.628.9208 19.8378.6165 19.074.321 18.2017.1197 16.9244.0645 15.6471.0093 15.236-.005 11.977.0014 8.718.0076 8.31.0215 7.0301.0839m.1402 21.6932c-1.17-.0509-1.8053-.2453-2.2287-.408-.5606-.216-.96-.4771-1.3819-.895-.422-.4178-.6811-.8186-.9-1.378-.1644-.4234-.3624-1.058-.4171-2.228-.0595-1.2645-.072-1.6442-.079-4.848-.007-3.2037.0053-3.583.0607-4.848.05-1.169.2456-1.805.408-2.2282.216-.5613.4762-.96.895-1.3816.4188-.4217.8184-.6814 1.3783-.9003.423-.1651 1.0575-.3614 2.227-.4171 1.2655-.06 1.6447-.072 4.848-.079 3.2033-.007 3.5835.005 4.8495.0608 1.169.0508 1.8053.2445 2.228.408.5608.216.96.4754 1.3816.895.4217.4194.6816.8176.9005 1.3787.1653.4217.3617 1.056.4169 2.2263.0602 1.2655.0739 1.645.0796 4.848.0058 3.203-.0055 3.5834-.061 4.848-.051 1.17-.245 1.8055-.408 2.2294-.216.5604-.4763.96-.8954 1.3814-.419.4215-.8181.6811-1.3783.9-.4224.1649-1.0577.3617-2.2262.4174-1.2656.0595-1.6448.072-4.8493.079-3.2045.007-3.5825-.006-4.848-.0608M16.953 5.5864A1.44 1.44 0 1 0 18.39 4.144a1.44 1.44 0 0 0-1.437 1.4424M5.8385 12.012c.0067 3.4032 2.7706 6.1557 6.173 6.1493 3.4026-.0065 6.157-2.7701 6.1506-6.1733-.0065-3.4032-2.771-6.1565-6.174-6.1498-3.403.0067-6.156 2.771-6.1496 6.1738M8 12.0077a4 4 0 1 1 4.008 3.9921A3.9996 3.9996 0 0 1 8 12.0077"/></svg></a>
      <a href="https://www.pinterest.com/GatheringHour/" target="_blank" rel="noopener" aria-label="Gathering Hour on Pinterest"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12.017 0C5.396 0 .029 5.367.029 11.987c0 5.079 3.158 9.417 7.618 11.162-.105-.949-.199-2.403.041-3.439.219-.937 1.406-5.957 1.406-5.957s-.359-.72-.359-1.781c0-1.663.967-2.911 2.168-2.911 1.024 0 1.518.769 1.518 1.688 0 1.029-.653 2.567-.992 3.992-.285 1.193.6 2.165 1.775 2.165 2.128 0 3.768-2.245 3.768-5.487 0-2.861-2.063-4.869-5.008-4.869-3.41 0-5.409 2.562-5.409 5.199 0 1.033.394 2.143.889 2.741.099.12.112.225.085.345-.09.375-.293 1.199-.334 1.363-.053.225-.172.271-.401.165-1.495-.69-2.433-2.878-2.433-4.646 0-3.776 2.748-7.252 7.92-7.252 4.158 0 7.392 2.967 7.392 6.923 0 4.135-2.607 7.462-6.233 7.462-1.214 0-2.354-.629-2.758-1.379l-.749 2.848c-.269 1.045-1.004 2.352-1.498 3.146 1.123.345 2.306.535 3.55.535 6.607 0 11.985-5.365 11.985-11.987C23.97 5.39 18.592.026 11.985.026L12.017 0z"/></svg></a>
      <a href="https://www.tiktok.com/@gathering.hour" target="_blank" rel="noopener" aria-label="Gathering Hour on TikTok"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z"/></svg></a>
    </div>
  </div>
</section>

<!-- ── FOOTER ── -->
<footer class="divider-top">
  <div class="footer-top">
    <div class="footer-col">
      <h5>Gathering Hour</h5>
      <a href='/how-it-works'>How it Works</a>
      <a href='/founding-friends'>Founding Friends</a>
      <a href='/corporate'>Groups &amp; Teams</a>
      <a href='/gatherings'>Gatherings</a>
    </div>
    <div class="footer-col">
      <h5>Shop</h5>
      <a href='/gatherings'>Browse Gatherings</a>
      <a href='/activity-kits'>Activity Kits</a>
      <a href='/decorations'>Decorations</a>
      <a href='/gift-cards'>Gift Cards</a>
    </div>
    <div class="footer-col">
      <h5>Support</h5>
      <a href='/faq'>FAQ</a>
      <a href='/shipping-returns'>Shipping &amp; Returns</a>
      <a href='/order-tracking'>Order Tracking</a>
      <a href='/contact'>Contact</a>
      <a href='/privacy-terms'>Privacy &amp; Terms</a>
      <a href='/affiliate-disclosure'>Affiliate Disclosure</a>
      <a href="#" class="cookie-prefs-link">Cookie Preferences</a>
    </div>
    <div class="footer-col">
      <h5>Company</h5>
      <a href='/about'>About</a>
      <a href='/journal'>Journal</a>
      <a href='/contact'>Contact</a>
    </div>
  </div>

  <hr class="footer-divider">

  <div class="footer-brand">
    <img src="/assets/gh-logo-transp.png" alt="" class="footer-brand-logo">
    <p class="footer-tagline">Beautiful gatherings, already planned.</p>
    <ul class="footer-social">
      <li><a href="https://www.instagram.com/gathering.hour/" target="_blank" rel="noopener">Instagram</a></li>
      <li><a href="https://www.pinterest.com/GatheringHour/" target="_blank" rel="noopener">Pinterest</a></li>
      <li><a href="https://www.tiktok.com/@gathering.hour" target="_blank" rel="noopener">TikTok</a></li>
    </ul>
  </div>

  <div class="footer-bottom">
    <p>© 2026 Gathering Hour</p>
  </div>
</footer>

<!-- ── COOKIE CONSENT BANNER ──
     Notice + opt-out style, see styles.css for the reasoning. Shown
     once per browser until dismissed; "Turn off analytics cookies"
     sets a persistent opt-out flag for when GA4 is wired in. Same
     block duplicated on every page, kept in sync, per this site's
     established "no shared JS file" pattern. -->
<div class="cookie-banner" id="cookieBanner" role="region" aria-label="Cookie notice">
  <div class="cookie-banner-inner">
    <p class="cookie-banner-text">We use cookies to keep your cart working and understand how visitors use this site. See our <a href='/privacy-terms#cookies'>Cookie Policy</a> for details.</p>
    <div class="cookie-banner-btns">
      <button type="button" class="cookie-banner-optout" id="cookieOptOutBtn">Turn off analytics cookies</button>
      <button type="button" class="cookie-banner-accept" id="cookieAcceptBtn">Got it</button>
    </div>
  </div>
</div>


<!-- ── WAITLIST MODAL ── -->
<div class="modal-overlay" id="waitlistModal" onclick="if(event.target===this) closeWaitlist();">
  <div class="modal-box">
    <button type="button" class="modal-close" onclick="closeWaitlist()" aria-label="Close">×</button>

    <div id="modalFormView">
      <p class="modal-title">Be first to host <span id="modalGatheringName">this gathering</span>.</p>
      <p class="modal-sub">Join the list and we'll let you know when this gathering is ready.</p>
      <form class="modal-form-row" onsubmit="submitWaitlist(event)">
        <input type="email" id="modalEmail" placeholder="Email address" required>
        <button type="submit" class="btn-pill btn-tomato modal-submit" id="modalSubmitBtn">Join the waitlist</button>
        <p class="modal-error" id="modalError" style="display:none;">Something went wrong, mind trying again?</p>
      </form>
      <p class="modal-fineprint">You'll also receive occasional news from Gathering Hour.</p>
    </div>

    <div id="modalConfirmView" class="modal-confirm" style="display:none;">
      <p class="modal-title">You're on the list.</p>
      <p class="modal-sub">We'll let you know when <span id="modalGatheringNameConfirm">this gathering</span> is ready.</p>
      <a href="#" class="link-arrow" onclick="closeWaitlist(); return false;">Keep browsing →</a>
    </div>
  </div>
</div>

<script>
  // Nav shrinks and quiets down after a small scroll: full-size branded
  // entrance on load, then gets out of the way.
  (function () {
    var nav = document.querySelector('nav');
    function onScroll() {
      if (window.scrollY > 24) {
        nav.classList.add('nav-scrolled');
      } else {
        nav.classList.remove('nav-scrolled');
      }
    }
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
  })();
</script>

<script>
  // ── SHOP BY OCCASION filter (2026-09-16) ──
  // Each card carries a space-separated data-occasion list; clicking a
  // pill shows only cards matching that tag ("all" shows everything).
  // Toggles a shared empty-state message when a filter has zero matches
  // (currently true for "Kids" -- no gathering is tagged for it yet).
  (function () {
    var pills = document.querySelectorAll('.occ-pill');
    // 2026-09-30: also filters the VOL. cards in "Coming to the table";
    // that section's header+grid hide when nothing in it matches.
    var cards = document.querySelectorAll('.gath-catalog-card, .gath-list-card');
    var emptyMsg = document.getElementById('gathEmptyMsg');
    var listSection = document.querySelector('.gath-list-section');
    if (!pills.length || !cards.length) return;

    pills.forEach(function (pill) {
      pill.addEventListener('click', function () {
        pills.forEach(function (p) { p.classList.remove('active'); });
        pill.classList.add('active');

        var occasion = pill.dataset.occasion;
        var readyCount = 0, soonCount = 0;
        cards.forEach(function (card) {
          var tags = (card.dataset.occasion || '').split(' ');
          var show = occasion === 'all' || tags.indexOf(occasion) !== -1;
          card.style.display = show ? '' : 'none';
          if (show) { if (card.classList.contains('gath-list-card')) soonCount++; else readyCount++; }
        });
        if (listSection) listSection.classList.toggle('is-empty', soonCount === 0);
        if (emptyMsg) {
          emptyMsg.textContent = soonCount
            ? "Nothing ready to host for this occasion yet. See what's coming below."
            : "No gatherings for this occasion yet. Check back soon, or tell us what you're looking for below.";
          emptyMsg.classList.toggle('visible', readyCount === 0);
        }
      });
    });

    // Deep link: /gatherings.html#kids (etc.) opens with that filter on.
    var hashPill = location.hash && document.querySelector('.occ-pill[data-occasion="' + location.hash.slice(1) + '"]');
    if (hashPill) hashPill.click();
  })();
</script>

<script>
  // Waitlist modal, wired to Klaviyo client-side (public API key, safe to
  // expose, it can only create profiles/events, never read data). Each
  // submission fires a "Joined Gathering Waitlist" event tagged with the
  // gathering name and subscribes the profile to the existing "waitlist"
  // list. No backend server required.
  var KLAVIYO_PUBLIC_KEY = 'UhUBGL';
  var KLAVIYO_LIST_ID = 'VVmHNy';
  var KLAVIYO_REVISION = '2026-07-15';
  var currentGatheringName = '';

  function openWaitlist(name) {
    currentGatheringName = name;
    document.getElementById('modalGatheringName').textContent = name;
    document.getElementById('modalGatheringNameConfirm').textContent = name;
    document.getElementById('modalFormView').style.display = 'block';
    document.getElementById('modalConfirmView').style.display = 'none';
    document.getElementById('modalEmail').value = '';
    document.getElementById('modalError').style.display = 'none';
    document.getElementById('waitlistModal').classList.add('open');
  }

  function closeWaitlist() {
    document.getElementById('waitlistModal').classList.remove('open');
  }

  function submitWaitlist(event) {
    event.preventDefault();
    var email = document.getElementById('modalEmail').value;
    var btn = document.getElementById('modalSubmitBtn');
    var errorEl = document.getElementById('modalError');
    errorEl.style.display = 'none';
    btn.disabled = true;
    btn.textContent = 'Joining...';

    Promise.all([
      trackWaitlistEvent(email, currentGatheringName),
      subscribeToWaitlistList(email)
    ]).then(function () {
      document.getElementById('modalFormView').style.display = 'none';
      document.getElementById('modalConfirmView').style.display = 'block';
    }).catch(function () {
      errorEl.style.display = 'block';
    }).finally(function () {
      btn.disabled = false;
      btn.textContent = 'Join the waitlist';
    });

    return false;
  }

  function trackWaitlistEvent(email, gatheringName) {
    return fetch('https://a.klaviyo.com/client/events/?company_id=' + KLAVIYO_PUBLIC_KEY, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json', revision: KLAVIYO_REVISION },
      body: JSON.stringify({
        data: {
          type: 'event',
          attributes: {
            properties: { gathering: gatheringName },
            metric: { data: { type: 'metric', attributes: { name: 'Joined Gathering Waitlist' } } },
            profile: { data: { type: 'profile', attributes: { email: email } } }
          }
        }
      })
    });
  }

  function subscribeToWaitlistList(email) {
    return fetch('https://a.klaviyo.com/client/subscriptions/?company_id=' + KLAVIYO_PUBLIC_KEY, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json', revision: KLAVIYO_REVISION },
      body: JSON.stringify({
        data: {
          type: 'subscription',
          attributes: {
            profile: {
              data: {
                type: 'profile',
                attributes: {
                  email: email,
                  subscriptions: { email: { marketing: { consent: 'SUBSCRIBED' } } }
                }
              }
            }
          },
          relationships: { list: { data: { type: 'list', id: KLAVIYO_LIST_ID } } }
        }
      })
    });
  }
</script>


<script>
  // ── COOKIE CONSENT BANNER ──
  // Notice + opt-out (not block-until-accept), see styles.css header
  // comment for why. Preference lives in localStorage, not a cookie,
  // so the cookie notice itself doesn't need a cookie to work.
  (function () {
    var DISMISSED_KEY = 'gh_cookie_notice_dismissed';
    var OPTOUT_KEY = 'gh_analytics_optout';
    var banner = document.getElementById('cookieBanner');
    if (!banner) return;

    function updateOptOutLabel() {
      var btn = document.getElementById('cookieOptOutBtn');
      if (!btn) return;
      var isOut = localStorage.getItem(OPTOUT_KEY) === 'true';
      btn.textContent = isOut ? 'Analytics cookies are off' : 'Turn off analytics cookies';
    }

    if (localStorage.getItem(DISMISSED_KEY) !== 'true') {
      banner.classList.add('visible');
    }

    var acceptBtn = document.getElementById('cookieAcceptBtn');
    if (acceptBtn) {
      acceptBtn.addEventListener('click', function () {
        localStorage.setItem(DISMISSED_KEY, 'true');
        banner.classList.remove('visible');
      });
    }

    var optOutBtn = document.getElementById('cookieOptOutBtn');
    if (optOutBtn) {
      optOutBtn.addEventListener('click', function () {
        var isOut = localStorage.getItem(OPTOUT_KEY) === 'true';
        localStorage.setItem(OPTOUT_KEY, isOut ? 'false' : 'true');
        updateOptOutLabel();
      });
    }

    document.querySelectorAll('.cookie-prefs-link').forEach(function (el) {
      el.addEventListener('click', function (e) {
        e.preventDefault();
        banner.classList.add('visible');
      });
    });

    updateOptOutLabel();
  })();
</script>

<script src="/signup-popup.js?v=20261004a"></script>
<!-- Sovrn Commerce (VigLink): turns plain retailer links into affiliate links (2026-10-15, affiliate handoff) -->
<script type="text/javascript">
  var vglnk = {key: '0e9a4c55bc62b5523d88dc826290b18e'};
  (function(d, t) {var s = d.createElement(t);
    s.type = 'text/javascript';s.async = true;
    s.src = '//cdn.viglink.com/api/vglnk.js';
    var r = d.getElementsByTagName(t)[0];
    r.parentNode.insertBefore(s, r);
  }(document, 'script'));
</script>
</body>
</html>