/*
  Gathering Hour: email sign-up pop-up + "Join the list" edge tab.
  2026-10-01: moved out of index.html so every public marketing/shop page
  shares one copy (per Sarah). Loaded via
    <link rel="stylesheet" href="/signup-popup.css">
  and /signup-popup.js (which injects the markup). Edit here, not per page.
  Original build notes kept below.
*/
/* ── EMAIL SIGN-UP POP-UP ──
   2026-09-21: built from Sarah's Klaviyo hand-off spec + Email Popup.dc.html
   mockup. Native on-site markup (not Klaviyo's own form builder) so it can
   use the site's real, already-established brand tokens and type system
   (Cormorant Garamond italic / Archivo Black / Archivo, --paper / --espresso
   / --aubergine / --tomato) rather than the mockup's own separate palette
   (close but not identical -- e.g. plum #4A0B26 vs --aubergine #440322) and
   font pair (Playfair Display / Rubik, used nowhere else on the site).
   Submits client-side straight to Klaviyo's public API, same pattern as the
   gatherings.html waitlist modal: company_id=UhUBGL (public key, safe to
   expose, can only create profiles/events, never read data), this signup's
   own "Hosting List" (id UfmvRa, created today via the Klaviyo API), plus a
   "Joined Hosting List" event so a welcome flow can key off it later -- see
   the script block near the end of this file for the actual calls.
   Copy: softened from the mockup's "gathering, 10% off" headline per
   Sarah's note that leading with a flat discount felt too early/too
   transactional for the brand's tone. Headline here is just "Your first
   gathering" (no percentage in the big red type); 10% off still appears,
   once, small, in the body line and again as the reward on the success
   screen -- same incentive, softer ask. Easy to flip back to the mockup's
   original headline/button copy if she'd rather -- just the two .popup-
   headline spans and the submit button's default label, below.
   Photography: 2026-09-21, later -- Sarah supplied a real photo (the
   garden table/wicker-chair shot, saved to /assets/tea-in-the-garden-1-
   vert.jpg), swapped in for the placeholder that was here at first. It's
   shot portrait, which happens to match the mockup's own portrait image
   panel exactly. Dropped the
   mockup's "GATHERING NO. 02 / GOLDEN HOUR" photo tag entirely -- this
   pop-up isn't tied to one theme, so a theme-specific badge stamped over a
   generic hero photo would just be confusing.
   Desktop: dimmed scrim (--espresso at 55%, matching the waitlist modal's
   own overlay color) + centered 2-col box (photo left, form right), square
   corners, entrance per the spec (scrim fade 200ms, box fade + translateY
   280ms). Mobile (<768px): the same box reflows to a single column, bottom-
   anchored sheet, image strip on top, wordmark and close X dropped per the
   mobile spec (tap-outside + "No thanks" are the only ways to dismiss).
   Trigger: 6s on page OR 35% scroll depth, whichever comes first, skipped
   entirely if already suppressed. Dismiss (×, decline link, tap-outside,
   Esc) sets a 30-day localStorage suppression and reveals the pinned
   teaser badge (bottom-left) so a visitor can still reopen it anytime
   during that window. A successful submit sets permanent suppression
   instead (no teaser, never re-triggers) and swaps the box to the success
   panel in place, matching the mockup's cross-fade.
   2026-09-21, later: dropped the 10% off incentive entirely, per Sarah --
   not compelling on a $22 product, and she'd rather keep launch framing
   simple: "you're the first to know" instead of a discount pitch. Headline
   is now "You could / host." (was "Your first gathering"), body is "New
   gatherings, hosting notes, and the occasional behind-the-scenes --
   nothing more than that." First pass also deleted the success-screen code
   chip and its copy-to-clipboard JS since there was no code to hand over.
   2026-09-21, later still: chip came back, repurposed -- Sarah wanted to
   keep the dashed-chip visual (it reads as a nice little reveal after
   submit) but fill it with something real instead of a fake reward: "Start
   with -- Tea in the Garden · Golden Hour", each name linking straight to
   that theme's page, instead of a discount code + copy button. Success
   body is now just "Glad you're here." and the CTA is "START PLANNING"
   (was "EXPLORE GATHERINGS" / "START SHOPPING"), still linking to
   /gatherings.html. The Klaviyo wiring itself (list, event) hasn't moved
   through either pass -- both were copy/content-only changes. The HOST10
   Shopify discount code from earlier this session stays created (Sarah
   expects to use it for something later) but is now deactivated rather
   than live, and isn't referenced anywhere on this page.
   2026-09-21, later still again: the chip was one pass too many -- Sarah
   called the success screen "doing too much" with body copy + chip +
   button all stacked up. Stripped back to just the headline ("You're" /
   "all set.", was "You're on" / "the list") and the START PLANNING button
   directly underneath -- no body copy, no chip. .popup-success-body and
   .popup-code-chip (+ its label/value/link rules) are gone from the CSS
   too, not just unused -- nothing references them anymore. */

.popup-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(42,27,21,0.55);
  z-index: 300;
  align-items: center; justify-content: center;
  padding: 24px;
}
.popup-overlay.open { display: flex; }

.popup-box {
  background: var(--paper);
  width: 100%; max-width: 900px; min-height: 470px;
  box-shadow: 0 30px 70px rgba(42,27,21,0.38);
  display: grid; grid-template-columns: minmax(0,0.82fr) minmax(0,1fr);
  position: relative;
  opacity: 0; transform: translateY(12px);
  animation: popupIn 280ms cubic-bezier(0.2,0.8,0.2,1) forwards;
}
/* 2026-09-21: success screen is a lot shorter now (just a headline + one
   button, no body copy/chip -- see the ".popup-success" comment below),
   so keeping the full 900x470 capture-step box size around it left a huge
   plum rectangle with content huddled in the middle. #popupBox gets this
   class from JS the moment success shows (see submitPopup() near the end
   of this file), sizing the box down to something closer to a compact
   card instead of stretching to match the two-column capture layout. */
.popup-box.is-success { max-width: 440px; min-height: 0; }
@keyframes popupIn { to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .popup-box { animation: none; opacity: 1; transform: none; }
}

.popup-image {
  position: relative;
  background-color: var(--espresso-15);
  background-position: center; background-size: cover; background-repeat: no-repeat;
  min-height: 320px;
}
.popup-close {
  position: absolute; top: 18px; right: 20px;
  background: none; border: none; font-size: 22px; line-height: 1;
  color: var(--espresso-50); cursor: pointer; z-index: 2;
}
.popup-close:hover { color: var(--aubergine); }

.popup-form-panel {
  padding: 46px 44px;
  display: flex; flex-direction: column; justify-content: center; gap: 22px;
  position: relative;
}
.popup-wordmark { font-size: 26px; color: var(--aubergine); text-decoration: none; display: flex; align-items: baseline; }
.popup-wordmark em { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 500; }
.popup-wordmark strong { font-family: 'Archivo Black', sans-serif; font-style: normal; font-weight: 400; }

.popup-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--tomato); margin-bottom: 4px; }
.popup-headline { line-height: 0.98; }
.popup-headline .hl-italic { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 500; font-size: 46px; color: var(--aubergine); display: block; }
.popup-headline .hl-black { font-family: 'Archivo Black', sans-serif; font-size: 38px; color: var(--tomato); letter-spacing: -1px; display: block; margin-top: 2px; }
.popup-body { font-size: 16px; line-height: 1.55; color: var(--espresso-70); max-width: 360px; }

.popup-form { display: flex; flex-direction: column; gap: 12px; }
.popup-form input {
  font-family: 'Archivo', sans-serif; font-size: 16px;
  padding: 16px 18px; border: 1.5px solid var(--espresso-15); border-radius: 0;
  background: #fff; color: var(--espresso); width: 100%;
}
.popup-form input::placeholder { color: var(--espresso-50); }
.popup-form input:focus { outline: none; border-color: var(--aubergine); }
.popup-form input.error { border-color: var(--tomato); }

.popup-error { font-size: 12px; color: var(--tomato); display: none; margin: -4px 0 0; }
.popup-error.visible { display: block; }

.popup-decline-group { display: flex; flex-direction: column; gap: 10px; }
.popup-decline {
  font-family: 'Archivo', sans-serif; font-size: 14px; font-weight: 500; color: var(--espresso-50);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
  background: none; border: none; padding: 0; text-align: left; width: fit-content;
}
.popup-decline:hover { color: var(--aubergine); }
.popup-fineprint { font-size: 11px; line-height: 1.5; color: var(--espresso-50); }

.popup-success {
  display: none;
  background: var(--aubergine);
  grid-column: 1 / -1;
  padding: 40px 36px;
  flex-direction: column; align-items: flex-start; gap: 20px;
}
.popup-success.active { display: flex; }
.popup-success .popup-wordmark { color: var(--paper); }
.popup-success-headline { line-height: 1.0; }
.popup-success-headline .hl-italic { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 42px; color: var(--paper); display: block; }
.popup-success-headline .hl-black { font-family: 'Archivo Black', sans-serif; font-size: 34px; color: var(--tomato); letter-spacing: -1px; display: block; }
/* button no longer stretches to the box's full width (the flex column's
   default align-items:stretch was forcing it edge-to-edge) -- it's a pill
   now, sized to its own label like every other button on the site. */
.popup-success .btn-pill { align-self: flex-start; text-align: center; }

/* 2026-09-22: moved from left:20px to right:20px -- Sarah found it was
   sitting directly on top of the footer's Instagram/Pinterest/TikTok
   links whenever the page was scrolled to the bottom, since both were
   fixed/anchored to the same bottom-left corner. Right side has nothing
   else fixed there. If this still collides with something on the right
   (or Sarah prefers a vertical edge-tab instead), swap this block for a
   right:0; top:50%; transform:translateY(-50%) rotate(-90deg) treatment. */
/* 2026-10-01, per Sarah: redesigned as a small editorial tab on the
   browser edge -- burgundy, cream Cormorant italic "Join the list" and a
   plain Archivo "+" (no "OPEN"). While the pop-up is open the tab stays
   put and the + turns into a x that closes it. */
.popup-teaser {
  display: none;
  position: fixed; right: 24px; bottom: 0;
  background: var(--aubergine); color: var(--paper);
  padding: 11px 18px 10px 20px; border-radius: 6px 6px 0 0;
  align-items: center; gap: 14px; cursor: pointer;
  z-index: 290; border: none;
  box-shadow: 0 -4px 16px rgba(42,27,21,0.12);
  transition: padding 0.2s ease;
}
.popup-teaser:hover { padding-bottom: 14px; }
.popup-teaser.visible { display: flex; }
.popup-teaser.is-open { z-index: 1001; }
.popup-teaser-label { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 500; font-size: 19px; line-height: 1; }
.popup-teaser-icon { font-family: 'Archivo', sans-serif; font-weight: 300; font-size: 22px; line-height: 1; display: inline-block; transition: transform 0.2s ease; }
.popup-teaser.is-open .popup-teaser-icon { transform: rotate(45deg); }

@media (max-width: 768px) {
  .popup-teaser { right: 16px; }
  .popup-teaser.is-open { display: none; } /* phone pop-up is a bottom sheet with its own close button */
  .popup-overlay { padding: 0; align-items: flex-end; }
  .popup-box { grid-template-columns: 1fr; max-width: 480px; min-height: 0; animation-duration: 280ms; }
  .popup-image { min-height: 150px; }
  .popup-form-panel { padding: 22px 22px 26px; gap: 14px; }
  .popup-wordmark { display: none; } /* mobile sheet spec omits the wordmark to save vertical space above the fold */
  .popup-headline .hl-italic { font-size: 32px; }
  .popup-headline .hl-black { font-size: 28px; }
  .popup-body { font-size: 15px; max-width: none; }
  .popup-form input { padding: 15px 16px; }
  .popup-close { display: none; } /* spec: "No thanks" + tap-outside only on mobile */
  .popup-decline { text-align: center; width: 100%; }
  .popup-success { padding: 36px 24px; }
}

@media (min-width: 768px) and (max-width: 900px) {
  .popup-box { width: calc(100% - 48px); }
}

/* 2026-10-04: iPhones zoom in on any text box under 16px and don't zoom back
   out after submitting. 16px on phones stops the zoom entirely. */
@media (max-width: 900px) { input, select, textarea { font-size: 16px !important; } }