<!--
  Gathering Hour: Activity Kits browse page
  Created: 2026-08-14
  Notes: Same bones as gatherings.html (hero, then straight into product
  cards, no filler CTA between them), but only one real product exists so
  far. Painting Kit gets a full-width hero treatment since it's the only
  kit with real photography and real Shopify variants ready (1/6/12
  person sizes, confirmed in an earlier session), everything else is a
  "coming soon" card in a 2-col grid reusing the exact .ready-grid/
  .ready-card sizing from gatherings.html, so the thumbnails are all the
  same size as she asked, and new kits (Charm Bracelet Making, Wine &
  Cheese Tasting, Baby Bib Embroidery, etc.) can slot into that grid later
  with no redesign.

  Painting Kit card links to /painting-kit.html, which doesn't exist yet,
  that's the next page to build. Flower Arranging and Sprinkle
  Embroidery open the same waitlist modal/Klaviyo flow as gatherings.html
  (same public key, same "waitlist" list), reusing the photos already in
  the Website Image Library from the Tea in the Garden build.

  The Painting Kit hero photo reuses the small thumbnail from Tea in the
  Garden (7r19nQX.jpeg) as a placeholder, since that's the only Painting
  Kit photo on hand. Worth swapping for a larger, more editorial lifestyle
  shot if you have (or want to shoot) one specifically for this page,
  since the wireframe calls for something bigger and more "hero" than a
  thumbnail crop.

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

  2026-08-18: applied the new Gathering Hour Web Type Scale (see
  styles.css). This page was missed in the first pass through the site
  (it isn't linked from as many places as the others) but it draws from
  the same template as gatherings.html, so it gets the same treatment.
  .ak-hero-headline's two spans (40px/36px mismatched) unified to
  52px/52px (Hero tier), mobile 34px/30px mismatched -> 40px/40px.
  .kit-hero-name (the featured Painting Kit hero's own name) 32px -> 40px
  (Editorial tier). .kit-editorial-headline ("Add an activity to any
  gathering.") 32px -> 40px (Editorial tier). .ready-name 24px -> 20px,
  .modal-title 26px -> 20px, both matching the same shared components'
  new sizes on gatherings.html. .card-status and .kit-hero-category (true
  eyebrow-style caps labels) matched to the shared 13px/700/0.14em spec,
  12px mobile added along with the rest of this page's eyebrow uses.
  Body/meta copy floored: .ak-hero-body, .kit-hero-desc, .kit-editorial-
  body, .modal-sub -> 16px (body); .kit-hero-meta, .ready-meta, .modal-
  error, .modal-fineprint -> 14px (meta). .modal-close and .modal-form-
  row input left alone, UI chrome.

  2026-08-19, later same day: new sitewide corner-radius system (see
  styles.css). This page's photography (kit hero, ready/soon card images)
  had inline border-radius:4px reduced to 2px. .modal-box (already 8px)
  left as-is, matches the new small-not-bubbly card standard.

  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
  "Activity Kits" eyebrow (redundant with the page title/nav/headline)
  and "Make it yours" (redundant with "Add an activity to any
  gathering." right below it). Kept "More activities" above the
  Flower Arranging/Sprinkle Embroidery grid, real orientation value,
  without it those two cards would read as unrelated to the Painting
  Kit flagship above them. Kept .kit-hero-category ("Painting") and
  the .card-status "Coming soon" tags, those are per-item functional
  labels, not decorative page eyebrows. Kept the newsletter band's
  "From Gathering Hour", inside the pink banner, exempt per Sarah's
  rule.

  2026-08-20: fixed the two-tone hero headline's second line running on
  the same line as the first instead of breaking. .ak-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, FAQ, Founding
  Friends, Gatherings, Order Tracking, Privacy & Terms, Shipping &
  Returns).
  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, seventh page. Same pattern as the other
  rollout pages:
  - Nav simplified to How it works / About / Shop pill, matching the
    homepage. toggleShopMenu() removed from the closing <script> block.
  - Corner radius squared off: all three inline border-radius:2px
    photos (Painting Kit hero, Flower Arranging, Sprinkle Embroidery)
    -> 0. .modal-box left at 8px, same call as gatherings.html's
    waitlist modal, it's a dialog, not photography or the card pattern.
  - No pink to remove on this page.
  - Newsletter band: no page-scoped change needed, picks up the new
    aubergine default from the shared .cta-band in styles.css
    automatically.

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 still: rolled the homepage's bold-divider treatment (.divider-bold, see styles.css) onto this page too, per Sarah's sitewide request. Upgraded the Painting Kit flagship row's thin .divider-top line to .divider-bold, marking it as the page's editorial moment.

2026-09-17: hero headline sized up, a scaled-down version of Gatherings' "oversized header treatment" (this hero's own container is narrower than Gatherings'/FAQ's) -- see the CSS comment above .ak-hero-headline for the full spec.

2026-10-02, per Sarah's notes: rebuilt to match Browse Gatherings' catalog logic. Painting Kit stays the flagship ("Available now" tag). "More activities" 2-card grid replaced by a "coming to the table" grid on the mushroom band: 5 same-size photo cards (photo, Coming soon, name, category · guests, Join the list), no VOL. numbers. Charm Bracelet Making and Tote Bag Embroidery have no photo yet and show a plain name tile. "Add an activity to any gathering" compressed to a short "Bring one to whatever you're planning" block with Browse Gatherings + How Activity Kits work links.
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-22: "Decorations" (/decorations.html) added to the Shop menu and footer Shop column, after Activity Kits (Sarah).
2026-10-23: Paper Lantern Kit added first in "coming to the table" (waitlist, Sarah's temporary photo); also listed on decorations.html.
2026-10-23: Clay Diya Decorating Kit added after the Paper Lantern Kit (waitlist, Sarah's temporary photo); also on decorations.html.
-->
<!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: Activity Kits</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 (compressed, ~250-300px total including padding, a thin rule
   right after it separates "chrome" from the product content below) ── */
.ak-hero { max-width: 620px; padding-top: 28px; padding-bottom: 8px; }
.ak-hero-headline { margin-bottom: 14px; }
/* Two-tone hero headline (site standard, see styles.css). 2026-09-17:
   scaled version of the "oversized header treatment" nailed down on
   Gatherings (see that page's CSS comment for the full spec) -- this
   hero's own container is only 620px wide (a third narrower than
   Gatherings'/FAQ's 1036px), so the same 46-88px clamp risked wrapping
   even on this page's short lines. Scaled the ceiling down instead of
   copying verbatim, per Sarah's call. Floor (40px) matches the old fixed
   mobile size exactly, so mobile doesn't get smaller, only desktop scales
   further via vw. */
.ak-hero-headline .hl-italic,
.ak-hero-headline .hl-black {
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  letter-spacing: -0.01em;
  display: block;
  line-height: 0.98;
}
.ak-hero-headline .hl-italic { color: var(--hl-serif); }
.ak-hero-headline .hl-black { color: var(--tomato); margin-top: 2px; }
@media (max-width: 1024px) {
  .ak-hero-headline .hl-italic,
  .ak-hero-headline .hl-black { line-height: 0.95; }
}
@media (max-width: 480px) {
  .ak-hero-headline .hl-italic,
  .ak-hero-headline .hl-black { line-height: 1.02; }
}
.ak-hero-body { font-size: 16px; color: var(--espresso-70); line-height: 1.5; }

/* ── SHARED STATUS TAG (reused from gatherings.html) ── */
.card-status {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--name);
  display: block;
  margin-bottom: 8px;
}

/* ── PAINTING KIT HERO ROW (image left, wider and more cinematic at
   roughly 57/43, copy right, both starting on the same top line, not
   centered against each other. Next kit promoted to this treatment
   should reverse the layout, copy left/image right, for editorial
   rhythm as the collection grows) ── */
.kit-hero { display: grid; grid-template-columns: 4fr 3fr; gap: 56px; align-items: start; text-decoration: none; color: inherit; }
.kit-hero-category { font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--espresso-50); display: block; margin-bottom: 10px; }
.kit-hero-name {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 40px;
  color: var(--name);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.kit-hero-meta { font-size: 14px; color: var(--espresso-50); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 18px; }
.kit-hero-desc { font-size: 16px; color: var(--espresso-70); line-height: 1.6; margin-bottom: 18px; }
.kit-hero-status { margin-bottom: 0; }
.kit-hero-img { aspect-ratio: 3 / 2; }
.kit-hero-img img { transition: transform 0.4s ease; }
.kit-hero:hover .kit-hero-img img { transform: scale(1.02); }
.kit-hero:hover .ready-arrow { transform: translateX(4px); }

/* ── "MORE ACTIVITIES" GRID (reuses .ready-grid/.ready-card from
   gatherings.html exactly, so thumbnails are the same size) ── */
.ready-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.ready-card { display: block; text-decoration: none; color: inherit; }
.ready-card-btn { text-align: left; background: none; border: none; cursor: pointer; padding: 0; font-family: inherit; width: 100%; }
.ready-name {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 20px;
  color: var(--name);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ready-arrow { color: var(--tomato); display: inline-block; transition: transform 0.2s; }
.ready-card:hover .ready-arrow { transform: translateX(4px); }
.ready-meta { font-size: 14px; color: var(--espresso-50); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 12px; }
.ready-img { aspect-ratio: 16 / 9; }
.ready-img img { transition: transform 0.4s ease; }
.ready-card:hover .ready-img img { transform: scale(1.03); }

/* ── "MAKE IT YOURS" EDITORIAL CLOSER ── */
.kit-editorial { max-width: 620px; }
.kit-editorial-headline { font-size: 40px; margin-bottom: 16px; }
.kit-editorial-body { font-size: 16px; color: var(--espresso-70); line-height: 1.6; margin-bottom: 16px; }

/* ── WAITLIST MODAL (same as gatherings.html) ── */
.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) {
  /* Fixed 40px override removed 2026-09-17 -- clamp()'s own 40px floor
     (above) already matches it, no regression. */
  .kit-hero { grid-template-columns: 1fr; gap: 28px; }
  .ready-grid { grid-template-columns: 1fr; gap: 28px; }
  .kit-hero-name { font-size: 32px; }
  .kit-editorial-headline { font-size: 32px; }
  .eyebrow, .card-status, .kit-hero-category { font-size: 12px; }
}

/* ── 2026-10-02 REBUILD: coming-soon grid + compressed closer ── */
/* 2026-10-03, per Sarah: tighter whitespace. Flagship row lost its
   divider line + 40px gap (no lines between chapters); bands trimmed. */
.ak-flagship { padding-top: 24px; padding-bottom: 40px; }
.kit-hero-status { margin-bottom: 10px; color: var(--hl-accent); }
.kit-hero .link-arrow { display: inline-block; margin-top: 4px; }
.soon-section { background: var(--mushroom, #F2E9E2); padding-top: 40px; padding-bottom: 44px; }
.soon-headline { margin-bottom: 10px; }
.soon-headline .hl-italic, .soon-headline .hl-black { display: block; font-size: 40px; }
.soon-headline .hl-black { color: var(--hl-accent); }
.soon-sub { font-size: 16px; color: var(--espresso-70); margin-bottom: 22px; }
.soon-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 36px 24px; } /* 4 across since Tote Bag Embroidery was pulled 2026-10-03; back to 3 if a 5th/6th is added */
.soon-card { display: flex; flex-direction: column; align-items: flex-start; text-align: left; background: none; border: none; padding: 0; cursor: pointer; font-family: inherit; color: inherit; }
.soon-img { width: 100%; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 2px; margin-bottom: 14px; }
.soon-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
.soon-card:hover .soon-img img { transform: scale(1.03); }
.soon-img-blank { background: var(--paper); border: 1px solid var(--espresso-15); display: flex; align-items: center; justify-content: center; padding: 20px; }
.soon-img-blank span { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 500; font-size: 26px; color: var(--name); text-align: center; line-height: 1.1; }
.soon-tag { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--name); margin-bottom: 6px; }
.soon-name { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 500; font-size: 20px; color: var(--name); margin-bottom: 4px; display: block; }
.soon-card:hover .ready-arrow { transform: translateX(4px); }
.soon-meta { font-size: 13px; color: var(--espresso-50); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 10px; }
.soon-join { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--hl-accent); }

.ak-anygathering { padding-top: 36px; padding-bottom: 40px; max-width: 680px; }
.ak-any-headline { margin-bottom: 12px; }
.ak-any-headline .hl-italic, .ak-any-headline .hl-black { display: block; font-size: 30px; }
.ak-any-headline .hl-black { color: var(--hl-accent); }
.ak-any-body { font-size: 16px; color: var(--espresso-70); line-height: 1.6; margin-bottom: 16px; }
.ak-any-links { display: flex; gap: 28px; flex-wrap: wrap; }

@media (max-width: 900px) {
  .soon-grid { grid-template-columns: 1fr 1fr; gap: 28px 16px; }
  .soon-headline .hl-italic, .soon-headline .hl-black { font-size: 32px; }
  .soon-name { font-size: 19px; }
  .soon-img-blank span { font-size: 20px; }
  .ak-any-headline .hl-italic, .ak-any-headline .hl-black { font-size: 26px; }
}
</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 ── -->
<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 (compressed, no filler CTA, straight into products) ── -->
<section class="ak-hero">
  <p class="eyebrow">Activity Kits</p> <!-- 2026-10-03, per Sarah: eyebrow back -->
  <h1 class="ak-hero-headline">
    <span class="hl-italic headline-serif">Something to do</span>
    <span class="hl-black headline-black">together.</span>
  </h1>
  <p class="ak-hero-body">Creative activities for gathering around the table. Everything you need, in one kit.</p>
</section>

<!-- ── AVAILABLE NOW: PAINTING KIT (2026-10-02 rebuild) ──
     Same flagship row as before: image left, info right. Status now reads
     "Available now" and sits at the top, so it's clear this is the kit
     you can buy today. -->
<section class="section-tight ak-flagship">
  <a class='kit-hero' href='/painting-kit'>
    <div class="img-slot kit-hero-img has-photo" data-slot="kit-hero-painting">
      <img src="https://cdn.shopify.com/s/files/1/0749/3504/2202/files/gathering-hour-7r19nQX.jpg?v=1787475893" alt="The Painting Kit, gouache paints, brushes and palettes" style="width:100%; height:100%; object-fit:cover; object-position:center; display:block; border-radius:2px;">
    </div>
    <div>
      <span class="card-status kit-hero-status">Available now</span>
      <span class="kit-hero-category">Painting</span>
      <p class="kit-hero-name">The Painting Kit <span class="ready-arrow">→</span></p>
      <p class="kit-hero-meta">No experience required &middot; 6, 12 or 18 guests</p>
      <p class="kit-hero-desc">A complete paint-around-the-table setup with gouache, brushes, palettes and original painting guides.</p>
      <span class="link-arrow">See the Painting Kit →</span>
    </div>
  </a>
</section>

<!-- ── COMING TO THE TABLE (2026-10-02) ──
     Same idea as gatherings.html's pipeline (available first, then what's
     coming), but with photography: an activity is easiest to understand
     from a picture. No VOL. numbers on activities. Every card is the same
     size/ratio so they read as one collection. Cards without a photo yet
     use a plain mushroom tile with the name; swap in a photo by replacing
     the .soon-img-blank div with an .img-slot like the others. -->
<section class="soon-section">
  <h2 class="soon-headline">
    <span class="hl-italic headline-serif">More activities are</span>
    <span class="hl-black headline-black">coming to the table.</span>
  </h2>
  <p class="soon-sub">Join the list and we&rsquo;ll let you know when they&rsquo;re ready.</p>
  <div class="soon-grid">
    <button type="button" class="soon-card" onclick="openWaitlist('Paper Lantern Kit')">
      <div class="img-slot soon-img has-photo"><img src="/assets/activity/lantern-making-kit.jpg" alt="Paper lanterns in rainbow colors decorated with gems and gold stars, with colored cardstock and sticker sheets" loading="lazy"></div>
      <span class="soon-tag">Coming soon</span>
      <p class="soon-name">Paper Lantern Kit <span class="ready-arrow">→</span></p>
      <p class="soon-meta">Craft &middot; Great for kids</p>
      <span class="soon-join">Join the list →</span>
    </button>
    <button type="button" class="soon-card" onclick="openWaitlist('Clay Diya Decorating Kit')">
      <div class="img-slot soon-img has-photo"><img src="/assets/activity/diya-painting-kit.jpg" alt="Hands painting a clay diya in red and blue, with unpainted terracotta diyas, painted diyas, paints, gems and gold stars" loading="lazy"></div>
      <span class="soon-tag">Coming soon</span>
      <p class="soon-name">Clay Diya Decorating Kit <span class="ready-arrow">→</span></p>
      <p class="soon-meta">Painting &middot; Diwali</p>
      <span class="soon-join">Join the list →</span>
    </button>
    <button type="button" class="soon-card" onclick="openWaitlist('Flower Arranging')">
      <div class="img-slot soon-img has-photo"><img src="/assets/flower-arranging-club.jpg" alt="Flower arranging, stems in glass vases" loading="lazy"></div>
      <span class="soon-tag">Coming soon</span>
      <p class="soon-name">Flower Arranging <span class="ready-arrow">→</span></p>
      <p class="soon-meta">Flowers &middot; 6–12 guests</p>
      <span class="soon-join">Join the list →</span>
    </button>
    <button type="button" class="soon-card" onclick="openWaitlist('Sprinkle Embroidery Cakes')">
      <div class="img-slot soon-img has-photo"><img src="https://cdn.shopify.com/s/files/1/0749/3504/2202/files/gathering-hour-SIiwhDt.jpg?v=1787475892" alt="Sprinkle Embroidery Cake, lemons and blue flowers in sprinkles" loading="lazy"></div>
      <span class="soon-tag">Coming soon</span>
      <p class="soon-name">Sprinkle Embroidery Cakes <span class="ready-arrow">→</span></p>
      <p class="soon-meta">Cake decorating &middot; 6–12 guests</p>
      <span class="soon-join">Join the list →</span>
    </button>
    <button type="button" class="soon-card" onclick="openWaitlist('Charm Bracelet Making')">
      <div class="img-slot soon-img has-photo"><img src="/assets/charm-bracelet-making.jpg" alt="Gold charm bracelet with enamel charms in a velvet tray" loading="lazy"></div>
      <span class="soon-tag">Coming soon</span>
      <p class="soon-name">Charm Bracelet Making <span class="ready-arrow">→</span></p>
      <p class="soon-meta">Craft &middot; 6–12 guests</p>
      <span class="soon-join">Join the list →</span>
    </button>
    <button type="button" class="soon-card" onclick="openWaitlist('Wine + Cheese Tasting')">
      <div class="img-slot soon-img has-photo"><img src="https://cdn.shopify.com/s/files/1/0749/3504/2202/files/gathering-hour-w2Q8eLp.jpg?v=1787475892" alt="Wine and cheese spread" loading="lazy"></div>
      <span class="soon-tag">Coming soon</span>
      <p class="soon-name">Wine + Cheese Tasting <span class="ready-arrow">→</span></p>
      <p class="soon-meta">Tasting &middot; 6–12 guests</p>
      <span class="soon-join">Join the list →</span>
    </button>
  </div>
</section>

<!-- ── WORKS WITH ANY GATHERING (compressed 2026-10-02, was a full section) ── -->
<section class="ak-anygathering">
  <h2 class="ak-any-headline">
    <span class="hl-italic headline-serif">Bring one to</span>
    <span class="hl-black headline-black">whatever you&rsquo;re planning.</span>
  </h2>
  <p class="ak-any-body">Activity Kits work with any Gathering Hour gathering, or completely on their own. Birthdays, showers, dinner parties, girls&rsquo; nights and everything in between.</p>
  <div class="ak-any-links">
    <a class='link-arrow' href='/gatherings'>Browse Gatherings →</a>
    <a class='link-arrow' href='/how-it-works#activity-kits'>How Activity Kits work →</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='/activity-kits' style='opacity:1; color: var(--aubergine);'>Activity Kits</a>
      <a href='/gatherings'>Gatherings</a>
    </div>
    <div class="footer-col">
      <h5>Shop</h5>
      <a href='/gatherings'>Browse Gatherings</a>
      <a href='/activity-kits' style='opacity:1; color: var(--aubergine);'>Activity Kits</a>
      <a href='/decorations'>Decorations</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 try <span id="modalGatheringName">this kit</span>.</p>
      <p class="modal-sub">Join the list and we'll let you know when this kit 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 kit</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, same behavior as
  // every other page.
  (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>
  // Waitlist modal, wired to Klaviyo client-side, identical setup to
  // gatherings.html (same public key, same "waitlist" list). Public API
  // key is safe to expose, it can only create profiles/events.
  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>