/*
  Gathering Hour: shared site stylesheet
  Created: 2026-08-11
  Notes: Design tokens, nav, footer, buttons, type helpers, the image-placeholder
  system, and the pink email/CTA band, everything identical across every page.
  Link this from the <head> of every page:
    <link rel="stylesheet" href="/styles.css">
  Page-specific layout (hero, numbered steps, product grids, etc.) stays in a
  local <style> block on each page, since those differ page to page. If a class
  name is reused across pages with different rules (e.g. .host-grid looks
  different on the homepage vs. How It Works), that's intentional: it's only
  ever defined locally on the page that uses it, never in here.

  2026-08-14: rebuilt after this file disappeared from the outputs folder
  between sessions (the second time HTML/CSS files have vanished this
  session, this time it took every page down since all of them import
  this stylesheet). Reconstructed from this session's own conversation
  history, should be byte-for-byte equivalent to the version every page
  was built against.

  2026-08-14, later same day: documented the two-tone hero headline
  convention (see the comment above .link-arrow) after Sarah approved it
  site-wide following the Painting Kit trial. Every page's main headline
  was updated to match, see each page's own header comment for exactly
  what changed there.

  2026-08-18: added the Gathering Hour Web Type Scale (see the big
  comment block above .eyebrow) after Sarah's pre-launch once-over
  flagged font-size drift across pages. .eyebrow normalized from 11px/500
  to the new canonical 13px/700/0.14em tracking; .statement-eyebrow,
  .closer-eyebrow and .cta-eyebrow all matched to the same three values
  (only their colors still differ). .cta-headline 44px -> 40px (Editorial
  tier), .cta-body 15px -> 16px (Body floor). .statement-headline's two
  spans unified to 40px/40px (was 42/38, Editorial tier, matches
  .closer-headline's existing 40/40 pattern), .statement-body 15.5px ->
  16px, .statement-closer 23px -> 20px (Subheading tier). Mobile eyebrow
  override added (12px) to the shared responsive block. Per Sarah: the
  homepage, How It Works, About and Founding Friends hero headlines keep
  their 2026-08-17 30% size bump rather than rolling back to the new 52px
  Hero tier, an intentional, deliberate exception, not drift. Every other
  page's hero and every other headline/body tier site-wide gets brought
  to this scale, tracked page by page in each file's own header comment.

  2026-08-18, later same day: the type scale's Button role (14px Archivo
  Bold, uppercase, both desktop and mobile) also applies to the shared
  .btn-pill, which every button site-wide is built from. Bumped from
  12px/600 to 14px/700, padding nudged 11px to 12px vertical to keep the
  pill's proportions balanced at the larger size. This changes every
  button on the site (nav Shop pill, all CTAs, Add buttons, form
  submits), by design, since Button is one of the eight scale roles.
  nav.nav-scrolled's shrink-on-scroll override (9.6px) is a deliberate
  micro-interaction, left alone.

  2026-08-19: GATHERING HOUR CORNER-RADIUS SYSTEM, added per Sarah's
  note that rounded corners everywhere (photos, cards, form fields, tags)
  were pushing the site toward a generic DTC/SaaS look rather than the
  editorial/fashion feel the typography and photography want. Her rule,
  now the site standard:
    - Editorial photography (hero shots, gallery photos, theme photos,
      flat-lays, menu spreads, basically every real photograph): square
      or very subtle radius, --radius-photo (2px). Let the photography
      read like it's in a magazine, not sitting inside an app card.
    - Product/UI imagery (laptop and iPad screenshots/mockups showing
      the Gathering Plan dashboard, anything meant to feel digital
      rather than photographic): --radius-ui (8px). Same value as cards,
      different reasoning: this imagery is explicitly allowed a "digital"
      feel.
    - Buttons: unchanged, .btn-pill stays a full pill (100px). This is
      the one deliberate, recurring rounded shape on the site, kept
      exactly because everything else is getting sharper around it.
    - Cards, modals, form fields: small radius, not big friendly
      bubbles, standardized to 8px (several were previously 10px).
    - Status tags/badges: pill or rounded is fine, these are functional
      UI, .badge's existing flag-corner shape (3px 0 0 3px) and the
      topic-pill/card-status pill shapes are unchanged.
  .img-slot (the shared photo wrapper used on every page) now uses
  --radius-photo. Every inline border-radius:4px on a photography <img>
  tag site-wide (71 instances across 10 files) was changed to 2px. The
  handful of Product/UI exceptions (homepage .plan-img and How It Works'
  .hero-img, both the same "laptop on a table showing the dashboard"
  photo; How It Works' .plan-mockup-img iPad graphic which had no radius
  to begin with; Golden Hour's and Tea in the Garden's .thought-mockup-img
  laptop mockups) went to 8px instead, kept in the "digital" bucket
  per Sarah's explicit call-out. Cards previously at 10px (contact page's
  left card, Corporate's inquiry card, the three product widget cards on
  Golden Hour/Tea in the Garden/Painting Kit) brought down to 8px to
  match modal-box and stay consistent with the new "not bubbly" cards
  rule. Small UI chrome (nav dropdown, the guest-count stepper's tiny
  +/- buttons, the badge tag) was left alone, already modest/functional,
  not part of what Sarah was flagging.

  2026-08-20: added a soft drop shadow under nav (box-shadow: 0 4px 16px
  rgba(42,27,21,0.06)), trialed on the homepage first per Sarah's
  Flamingo Estate reference, now moved here sitewide since she liked it.
  Subtle by design, a hint of separation from the page below rather than
  a hard line.

  2026-08-21: SITEWIDE FLAMINGO ESTATE SYSTEM ROLLOUT. Sarah's new
  color/architecture rule, trialed on the homepage first and now the
  default everywhere: paper is the background nearly everywhere, garnet
  (aubergine) is reserved for the footer only, blush (pink) is an
  occasional chapter-break background for one-time brand-pivot moments,
  and tomato is for small moments (buttons, links, emphasis lines), never
  a full section fill. Three shared components changed:
    - footer: now background: var(--aubergine) by default (was paper),
      with light-on-dark overrides added for .footer-col h5/a(+hover),
      .footer-divider, .footer-tagline, .footer-social a(+hover) and
      .footer-bottom p, matching the values already proven on the
      homepage's (now-removed) page-scoped .footer-garnet override.
    - .closer-band: background flipped aubergine -> paper (this is the
      repeatable, used-on-nearly-every-page "generic closer," so per
      Sarah's own rule it shouldn't be a special color every time).
      .cl-italic now aubergine, .cl-black now tomato. Pages using the
      plain shared .closer-band with no page-scoped override pick this
      up for free; their old eyebrows ("Ready when you are" etc.) lose
      their banner-exemption on paper and are being removed page by page.
    - .statement-band: background flipped aubergine -> blush (pink).
      Unlike .closer-band, this one really is a one-time content pivot
      per page it's used on (Corporate's "A Better Way to Get Together"),
      so it keeps a color background, just the lighter brand tint instead
      of garnet. .st-italic now aubergine (was pink, would've disappeared
      against the new pink background), .st-black now tomato (was paper),
      .statement-body now espresso-70 (was a light rgba), .statement-
      closer now espresso (was paper).
  .btn-outline-paper (used for a couple of closer-band secondary buttons)
  is styled for a dark background and needs a per-page fix wherever it's
  still used against the new paper closer-band, tracked per page.

  2026-08-27: FOOTER REVERTED, CREAM AGAIN. Sarah saw the garnet footer
  live sitewide and didn't like it. footer background: var(--aubergine)
  -> back to var(--paper), and every child override (.footer-col h5/a
  +hover, .footer-col .coming-soon-link, .footer-divider, .footer-
  tagline, .footer-social a+hover, .footer-bottom p) reverted from the
  light-on-dark rgba values back to the original dark-on-cream espresso
  tokens. Since footer is cream again and matches the body background on
  every page, restored the .divider-top class on all 15 footers (removed
  during the garnet rollout on 2026-08-21, when the color change itself
  provided the visual break, that reasoning no longer applies once both
  are the same cream). .closer-band, .statement-band and everything else
  from the 2026-08-21 rollout are unaffected, this only touches footer.

  2026-09-09: NEW DIRECTION, PHASE 1 (sitewide, low-risk pieces only).
  Sarah wants to move away from this cream/pink system entirely: more
  modern, clean, crisp, no pink anywhere, keep aubergine + tomato, bold
  oversized display typography, and (per a reference site she shared)
  generous rounded corners on photography again instead of the 2026-08-19
  flush-square rule. This is a real system change, being trialed on the
  homepage first (see index.html's own header comment) before it's
  generalized here and rolled out to the other 14 pages. Three small,
  low-risk pink usages that are identical everywhere and don't carry any
  content/layout risk were fixed sitewide right away rather than waiting
  for the trial, since "get rid of all the pink" was explicit and these
  are supporting UI, not full-section color decisions:
    - .badge.pink ("Coming soon" tags): was var(--pink-dark), now a
      muted neutral chip (espresso-15 bg, espresso text) instead of a
      colored one.
    - .img-slot placeholder background (the striped block shown before a
      real photo is dropped in): was var(--pink), now espresso-08, a
      neutral tint. Purely cosmetic, every current slot already has
      has-photo and never shows this background live.
    - .nav-shop-menu a:hover: was var(--pink) bg / aubergine text, now a
      light aubergine tint (rgba(68,3,34,0.06)) / aubergine text, same
      idea without pink.
  .cta-band (the newsletter band) was promoted to aubergine during the
  tea-in-the-garden.html/golden-hour.html rollout pass (see its own
  header comment above). .statement-band was the last holdout, migrated
  aubergine during corporate.html's rollout pass on 2026-09-09 (its
  only real instantiation on the site). No live CSS rule references
  var(--pink) or var(--pink-dark) anymore as of that change, both
  variables are left defined below in case a future section wants the
  same blush tint deliberately, but nothing currently uses them.
*/
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --paper:      #FFFAF3;
  --espresso:   #2A1B15;
  --espresso-70:rgba(42,27,21,0.72);
  --espresso-50:rgba(42,27,21,0.52);
  --espresso-15:rgba(42,27,21,0.15);
  --espresso-08:rgba(42,27,21,0.08);
  --aubergine:  #440322;
  --tomato:     #E21B1B;
  --orange:     #FF7300;
  --pink:       #FFE3E3;
  --pink-dark:  #EFA5A5;
  --mushroom:   #F2E9E2; /* "mushroom" (was --putty);  2026-10-01: faint warm colour-break band behind a whole section, so colour (not empty space) separates chapters */

  /* HEADLINE COLOUR SYSTEM (2026-10-01, per Sarah). Charcoal, burgundy
     and red each have one job -- use these role tokens, not the raw
     colours, so pages can't drift:
       --hl-serif   Cormorant italic half of an editorial headline
                    (H1s, major section heads, closer bands) = charcoal
       --hl-accent  Archivo bold half of those headlines, primary CTAs,
                    active states, small emphasis = red
       --name       Gathering/product names (Tea in the Garden, Golden
                    Hour, The Painting Kit...), VOL. labels, catalog
                    borders/metadata, quieter links = burgundy
       --body       Body copy = charcoal, always. Never burgundy.
     Exceptions: an all-burgundy editorial headline is allowed for a
     quiet section that shouldn't have the red punch -- but that's the
     exception, not the default. On dark (burgundy) bands the serif half
     goes paper/cream instead. The host dashboard (gather/*.html) and
     invite.html re-theme --aubergine per gathering and are not covered
     by this rule. */
  --hl-serif:  var(--espresso);
  --hl-accent: var(--tomato);
  --name:      var(--aubergine);
  --body:      var(--espresso);

  /* Corner-radius system, see the header comment above for the full
     rule. Photography stays near-square, Product/UI imagery and cards
     share a modest "digital" radius, buttons stay a full pill. */
  --radius-photo: 2px;
  --radius-ui:    2px; /* 2026-10-01, per Sarah: was 8px -- every corner on the site is now 2px except pill buttons and circles */
}

html { scroll-behavior: smooth; }
/* 2026-10-01: browsers don't pass the page font to form controls, so buttons/inputs were rendering in Arial -- inherit Archivo instead */
button, input, select, textarea { font-family: inherit; }
body {
  font-family: 'Archivo', sans-serif;
  background: var(--paper);
  color: var(--espresso);
  overflow-x: hidden;
  font-weight: 400;
}

img { max-width: 100%; display: block; }

/* ── GATHERING HOUR WEB TYPE SCALE (established 2026-08-18) ──
   Sarah's site-wide type audit: font sizes had drifted inconsistent page
   to page (a "Section" headline might be 24px on one page, 30px on
   another, 28px on a third), so this is the controlled scale every page
   gets built from going forward. Eight rules that matter more than the
   exact pixel numbers:

   1) One dominant headline per page. The page's opening H1 is always the
      largest type on the page, nothing further down competes with it.
   2) Cormorant Garamond is for emotion/editorial language and theme
      personality (hero lines, section intros with feeling), never for
      functional information (prices, form labels, "Choose your date",
      "Shopping List"). Those stay Archivo.
   3) The two-tone hero construction (Cormorant italic + Archivo Black
      bold, see the comment below) is a recognizable Gathering Hour
      device, keep using it for every page's opening headline.
   4) Eyebrows are always identical: 13px Archivo Bold, uppercase, 0.14em
      letter-spacing. Color can change per section, size/weight/tracking
      never do. This is what .eyebrow below now sets; any page-scoped
      "eyebrow" class should match these three values exactly and only
      vary color/margin.
   5) Body copy never goes below 14px anywhere, and standard informational
      body copy never goes below 16px. Important explanatory copy runs
      18px. Metadata (prices, captions, small print) is the 14px floor,
      nothing sits below it. Elegance comes from whitespace, not from
      shrinking type to fit a layout.
   6) Controlled scale only: 13 -> 14 -> 16 -> 18 -> 20 -> 30 -> 40 -> 52.
      Don't invent a one-off size (like 15px or 24px) to make something
      "a little more important." Not every page needs every tier.
   7) If a headline doesn't feel important enough, add whitespace above
      it before reaching for a bigger font size.
   8) Product pages, informational pages and landing pages all draw from
      this same kit. Different compositions are fine, different type
      systems per page are not.

   THE SCALE:
   52  Hero        Archivo Black + Cormorant italic (mixed), 40px mobile,
                    tight ~1.0 line-height. One page-opening H1 only.
                    NOTE: homepage, How It Works, About and Founding
                    Friends keep their own larger hero size (a deliberate
                    30% bump from 2026-08-17, kept as an intentional
                    exception per Sarah rather than rolled back to 52).
   40  Editorial    Cormorant Garamond italic 500, 32px mobile, ~1.1
                    line-height. Emotional/thematic section intros.
   30  Section      Archivo Bold, 26px mobile, ~1.1 line-height.
   20  Subheading   Archivo Bold, 18px mobile, ~1.2 line-height.
   18  Lead         Archivo Regular, 17px mobile, ~1.5 line-height.
                    Important explanatory copy.
   16  Body         Archivo Regular, 16px mobile, ~1.5 line-height.
                    Standard body copy floor.
   14  Meta         Archivo Regular, 14px both. Prices, captions, fine
                    print. Don't go smaller.
   13  Eyebrow      Archivo Bold, uppercase, 0.14em tracking, 12px mobile.
*/

/* ── TYPE HELPERS ── */
.eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--name); /* 2026-10-01, per Sarah: eyebrows default to burgundy; orange is now an occasional spark (seasonal art, illustrations, tiny details), not the default */
  display: block;
  margin-bottom: 14px;
}

.headline-serif {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 500;
  color: var(--hl-serif);
  line-height: 1.05;
  letter-spacing: -0.5px;
}

.headline-black {
  font-family: 'Archivo Black', sans-serif;
  font-weight: 400;
  letter-spacing: -1.5px;
  line-height: 0.98;
}

/* ── TWO-TONE HERO HEADLINE (site standard as of 2026-08-14) ──
   Every page's main/opening headline (the one thing that used to just be
   solid aubergine under the old "eggplant headline" rule) now pairs
   italic aubergine with bold tomato-red, brought back from the original
   pre-redesign draft after Sarah saw it live on the Painting Kit page
   and asked to roll it out everywhere. Pattern: wrap the headline in two
   spans, .headline-serif (italic, this class already defaults to
   espresso, override color: var(--aubergine) per page) for the first
   part, .headline-black (bold, already colorless by default, override
   color: var(--tomato) per page) for the emphasis part. Font sizes stay
   page-specific since hero scale differs page to page, so the color
   override lives in each page's own <style> block, scoped to that page's
   hero selector (e.g. ".hero h1 .hl-black { color: var(--tomato); }"),
   not set globally here. That's deliberate: .headline-black is reused on
   several pages for secondary section headlines that should stay a
   neutral color, only the page's TOP-LEVEL opening headline gets the
   two-tone treatment, not every headline on the page. */

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 700;
  color: var(--tomato);
  text-decoration: none;
  transition: opacity 0.2s;
}
.link-arrow:hover { opacity: 0.72; }

.badge {
  position: absolute;
  bottom: 16px;
  right: 0;
  background: var(--orange);
  color: var(--paper);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 8px 16px;
  border-radius: 3px 0 0 3px;
  z-index: 2;
}
.badge.pink { background: var(--espresso-15); color: var(--espresso); }

/* ── IMAGE PLACEHOLDER BLOCKS ── */
.img-slot {
  position: relative;
  background: var(--espresso-08);
  border-radius: var(--radius-photo);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.img-slot::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(45deg, transparent, transparent 11px, rgba(68,3,34,0.05) 11px, rgba(68,3,34,0.05) 12px);
}
/* Real photo has been dropped in, kill the placeholder stripes and tint */
.img-slot.has-photo { background: none; }
.img-slot.has-photo::after { content: none; }
.img-slot-label {
  position: relative;
  z-index: 1;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--aubergine);
  opacity: 0.45;
  line-height: 1.6;
  padding: 12px;
}
.img-slot-label small { display: block; font-size: 10px; font-weight: 400; text-transform: none; letter-spacing: 0.02em; margin-top: 2px; }

/* ── BUTTONS ── */
.btn-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border-radius: 100px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  border: none;
  text-decoration: none;
  transition: all 0.2s;
}
.btn-tomato { background: var(--tomato); color: var(--paper); }
.btn-tomato:hover { background: var(--aubergine); }

/* 2026-09-11: second solid pill variant, trialed first on the homepage's
   "Learn More" / "View All" secondary CTAs. Tomato stays reserved for
   the primary "Shop" actions (nav, hero, closer); this aubergine
   version is for a secondary action that shouldn't compete with those
   for attention. Sarah flagged this as something we'll likely reuse
   elsewhere once the homepage trial is confirmed, so it's going in the
   shared sitewide file rather than page-scoped. */
.btn-aubergine { background: var(--aubergine); color: var(--paper); }
.btn-aubergine:hover { background: var(--tomato); }

/* 2026-09-11: bolder section-divider utility, per Sarah's "some lines
   should be thick, not all of them" note (a fuller guide on where each
   weight applies is coming from her separately). This is the thick
   end of that system for now -- .divider-top (0.5px, var(--espresso-08))
   stays the default hairline for ordinary section boundaries.
   2026-09-11, later, corrected: this used to be a border-top directly
   on the <section> itself, which draws at the outer edge of the box --
   i.e. the literal viewport edge, since the section's own 48px side
   padding sits INSIDE that border. Sarah pointed out the line should
   line up with the photo/content edges instead of bleeding to the page
   edge. Fixed by moving the border onto a ::before pseudo-element,
   which renders INSIDE the section's padding box, so it's automatically
   inset to the same width as everything else in the section (photos,
   text, cards) rather than needing a separate margin hack. The section
   itself no longer needs its own top padding where this is used --
   that spacing now lives on the ::before's margin-bottom instead, see
   .divider-bold-roomy below for the one spot that needed a bit more of
   it. */
/* 2026-09-28, per Sarah: after living with the site a while, the thick
   2px lines felt heavy everywhere -- reverted to the same thin hairline
   .divider-top uses (0.5px, var(--espresso-08)) sitewide, "for now."
   Deliberately done here rather than swapping class names on every
   section across every page: .divider-bold/.divider-bold-roomy still
   control the margin-bottom spacing between sections (40px/56px), which
   was tuned per spot and is unrelated to line weight -- only the
   border itself changes. If the thick line comes back later, this is
   the one place to flip it. */
.divider-bold::before { content: ""; display: block; border-top: 0.5px solid var(--espresso-08); margin-bottom: 40px; }
.divider-bold-roomy::before { margin-bottom: 56px; }
/* 2026-09-29, per Sarah: hairlines should mark small internal structure
   (card divisions, footer structure, input fields) -- not major
   homepage chapter breaks. Add "no-line" alongside "divider-bold" on a
   section to keep its tuned margin-bottom spacing but drop the border,
   rather than touching the shared .divider-bold rule (still used for
   line+spacing together elsewhere, e.g. about.html/painting-kit.html). */
.divider-bold.no-line::before { border-top: none; }

/* 2026-09-16: about.html's Founder section is a .divider-bold spot that's
   also a CSS grid (.about-founder, two columns). A ::before pseudo is just
   another grid item, so without this it was landing in column 1 on its
   own row — a rule floating alone in the left column, shoving the
   headline/body into column 2 and the photo down into a new row. Forcing
   it to span both columns puts the rule back above the section as a
   normal full-width divider, same as everywhere else .divider-bold is
   used (nearly all of which are plain block sections, not grids).

   Audited every other .divider-bold usage sitewide after Sarah found a
   second instance of this exact bug (painting-kit.html's "Everything You
   Need" section, .pk-includes) — same root cause: divider-bold applied
   directly to the grid container itself, rather than to an outer wrapper
   around the grid. index.html/tea-in-the-garden.html/golden-hour.html/
   activity-kits.html/founding-friends.html/corporate.html/how-it-works.html
   all put divider-bold on a plain block section that merely *contains* a
   nested grid one level down — the pseudo lands as a sibling of that
   grid, not inside it, so those are unaffected. Only these two put the
   class on the grid element itself. */
.about-founder.divider-bold::before,
.pk-includes.divider-bold::before { grid-column: 1 / -1; }

/* ── NAV ── */
nav {
  position: sticky;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: var(--paper);
  border-bottom: 0.5px solid transparent;
  /* 2026-08-20: sitewide now, per Sarah's Flamingo Estate reference,
     trialed on the homepage first. A soft shadow gives the paper header
     a clean edge against the page below it, subtle on purpose. */
  box-shadow: 0 4px 16px rgba(42,27,21,0.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 48px;
  height: 96px;
  /* 2026-10-05, per Sarah: the header flickered while scrolling. It used
     to shrink 96 -> 68px in the page layout, so everything below jumped
     up 28px, the scroll position moved with it and could flip the header
     back to full size, over and over. Now the header always keeps its
     96px; sticky top: -28px lets its top 28px slide off-screen, so the
     visible bar is 68px, and padding-top drops the logo/links into that
     visible part. Nothing below the header ever moves. */
  top: -28px;
  transition: padding-top 0.25s ease, background-color 0.25s ease, border-color 0.25s ease, backdrop-filter 0.25s ease;
}
nav.nav-scrolled {
  padding-top: 28px;
  background: rgba(255, 250, 243, 0.9);
  border-bottom-color: var(--espresso-08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.nav-logo {
  font-size: 39px;
  color: var(--aubergine);
  text-decoration: none;
  display: flex;
  align-items: baseline;
  flex-shrink: 0;
  transition: font-size 0.25s ease;
}
nav.nav-scrolled .nav-logo { font-size: 21px; }
.nav-logo em { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 500; }
.nav-logo strong { font-family: 'Archivo Black', sans-serif; font-style: normal; font-weight: 400; }

.nav-links {
  display: flex;
  gap: 32px;
  align-items: center;
  list-style: none;
}
.nav-links a {
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--espresso);
  text-decoration: none;
  opacity: 0.62;
  transition: opacity 0.2s, font-size 0.25s ease;
}
.nav-links a:hover { opacity: 1; }
.nav-links li:last-child a { opacity: 1; }
.nav-links .btn-tomato,
.nav-links .btn-tomato:hover { color: var(--paper); opacity: 1; }
.coming-soon-nav { opacity: 0.32 !important; cursor: default; pointer-events: none; }

/* ── NAV TOGGLE (hamburger, mobile only) ──
   2026-09-19: mobile previously had NO way to reach How it works/About/
   Journal at all -- the responsive rule below used to just hide every
   .nav-links li except the last one (the Shop pill), with no menu to
   reveal the rest. Replaced with a real hamburger: hidden on desktop,
   shown at the same 900px breakpoint as everything else in this file's
   RESPONSIVE block. Toggled via a plain inline onclick (no page has a
   shared JS file to hook into), same "hand-duplicated per page" pattern
   as the rest of the nav. */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--espresso);
  border-radius: 1px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
nav.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
nav.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
nav.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Menu text (including Shop pill) quiets down ~20% once the nav has shrunk */
nav.nav-scrolled .nav-links a { font-size: 9.2px; }
nav.nav-scrolled .nav-links .btn-pill { font-size: 9.6px; padding: 9px 19px; }

/* ── SHOP NAV DROPDOWN ──
   2026-08-14: "Shop" changed from a direct link to gatherings.html into a
   dropdown (Gatherings, Activity Kits, Founding Friends, Corporate &
   Groups), per Sarah's nav restructuring. Shared here since nav is
   identical on every page. Opens on hover (desktop) or tap (mobile/touch,
   via toggleShopMenu in each page's script, since :hover alone doesn't
   work well on touch devices), closes on an outside click. */
.nav-shop { position: relative; }
.nav-shop-menu {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  background: var(--paper);
  border: 1px solid var(--espresso-15);
  border-radius: 8px;
  padding: 8px;
  min-width: 190px;
  box-shadow: 0 10px 28px rgba(42,27,21,0.12);
  z-index: 60;
}
.nav-shop:hover .nav-shop-menu,
.nav-shop.open .nav-shop-menu { display: block; }
.nav-shop-menu a {
  display: block;
  padding: 9px 12px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
  color: var(--espresso);
  text-decoration: none;
  border-radius: 5px;
  white-space: nowrap;
  opacity: 1;
}
.nav-shop-menu a:hover { background: rgba(68,3,34,0.06); color: var(--aubergine); }
/* 2026-10-01, per Sarah: dropdown redesigned to read as part of the
   header -- it hangs off the nav's bottom edge (not floating over it),
   no border, same cream + soft shadow as the nav, and uppercase tracked
   labels like the rest of the navigation. Desktop only; the phone menu
   (max-width 900px) keeps its stacked list. .nav-shop goes static so the
   menu positions against the whole sticky <nav>; the ::before strip
   bridges the gap so moving the mouse down doesn't drop the hover. */
@media (min-width: 901px) {
  .nav-shop { position: static; }
  .nav-shop-menu {
    top: 100%;
    right: 48px;
    border: none;
    border-radius: 0 0 2px 2px;
    padding: 10px 0 12px;
    min-width: 200px;
    box-shadow: 0 12px 20px rgba(42,27,21,0.08);
  }
  .nav-shop-menu::before { content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 28px; }
  .nav-shop-menu a {
    padding: 10px 24px;
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--espresso);
    opacity: 0.62;
    border-radius: 0;
    text-align: right;
    transition: opacity 0.2s, color 0.2s;
  }
  .nav-shop-menu a:hover { background: none; opacity: 1; color: var(--name); }
}

/* ── SECTION WRAPPER ── */
section { padding: 64px 48px; }
.divider-top { border-top: 0.5px solid var(--espresso-08); }

/* spacing tiers: tight = within one flowing story, roomy-top = start of a new one */
.section-tight { padding-top: 40px; padding-bottom: 40px; }
.section-roomy-top { padding-top: 96px; }

/* ── AUBERGINE BAND SYSTEM (repeatable components) ──
   Two variants, not one, per Sarah's 2026-08-17 note: "I wouldn't force
   the exact same layout every time... that gives us a little design
   system rather than randomly throwing aubergine rectangles around."

   STATEMENT BAND (.statement-band): eyebrow + two-tone headline, NO
   button, optional body copy / closer line. Used mid-page, inside longer
   pages, to break up content with a brand moment. Not a sell, a pause.
   First built as Corporate's "The Pitch" band (.corp-pitch-*), promoted
   to this shared component 2026-08-17.

   ACTION BAND (.closer-band): SMALL EYEBROW / editorial serif thought,
   bold action thought / primary button + optional secondary. ALWAYS has
   a button. Used once, near the end of commercial pages, right before
   the newsletter cta-band and footer, as an obvious next step. First
   built as FAQ's page-scoped "Still stuck?" band (.faq-stuck-*), promoted
   to a shared component 2026-08-17.

   Both variants: full-width aubergine background, orange eyebrow (not
   the low-opacity paper gray it started as, orange reads much more
   clearly against aubergine). Neither is meant for every page, they lose
   their effect if overused. ── */

/* 2026-09-09: promoted to aubergine as part of the sitewide "new
   direction" rollout, replacing pink, the same move already made on
   .cta-band. This was the last real pink usage on the site, deferred
   until corporate.html (its only real instantiation) was reached in
   the rollout. Text recolored for a dark background using the same
   "muddy pink" fix used everywhere else: solid var(--paper), not an
   rgba/espresso blend. */
.statement-band { background: var(--aubergine); text-align: center; }
.statement-eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper);
  margin-bottom: 22px;
  display: inline-block;
}
.statement-headline { max-width: 640px; margin: 0 auto 26px; }
.statement-headline .st-italic {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 40px;
  color: var(--paper);
  display: block;
  line-height: 1.1;
}
.statement-headline .st-black {
  font-family: 'Archivo Black', sans-serif;
  font-weight: 400;
  font-size: 40px;
  color: var(--tomato);
  display: block;
  line-height: 1.1;
  margin-top: 6px;
  letter-spacing: -1px;
}
.statement-body { font-size: 16px; color: var(--paper); line-height: 1.7; max-width: 520px; margin: 0 auto 30px; }
.statement-closer {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 600;
  font-size: 20px;
  color: var(--paper);
}

.closer-band { background: var(--paper); text-align: center; padding: 88px 48px; }
.closer-eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--name);
  margin-bottom: 20px;
}
.closer-headline { margin-bottom: 36px; }
.closer-headline .cl-italic {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 40px;
  color: var(--hl-serif);
  display: block;
  line-height: 1.2;
}
.closer-headline .cl-black {
  font-family: 'Archivo Black', sans-serif;
  font-weight: 400;
  font-size: 40px;
  color: var(--tomato);
  display: block;
  letter-spacing: -1px;
  line-height: 1.2;
}
.closer-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.btn-outline-paper { background: transparent; color: var(--paper); border: 1.5px solid rgba(255,250,243,0.35); }
.btn-outline-paper:hover { border-color: var(--paper); }
/* 2026-09-16: the dark-on-light counterpart to .btn-outline-paper above —
   for a secondary button sitting on the ordinary cream page background
   rather than over a photo/video, e.g. a hero's split layout where the
   copy column is plain paper, not scrimmed dark. */
.btn-outline-espresso { background: transparent; color: var(--espresso); border: 1.5px solid var(--espresso-15); }
.btn-outline-espresso:hover { border-color: var(--espresso); }

@media (max-width: 900px) {
  .closer-headline .cl-italic, .closer-headline .cl-black { font-size: 32px; }
  .statement-headline .st-italic, .statement-headline .st-black { font-size: 32px; }
}

/* ── EMAIL / CTA BAND ──
   2026-09-09: promoted to aubergine sitewide as part of the "new
   direction" rollout, replacing pink. This is the homepage's
   .home-cta-aubergine trial (approved) merged into the shared default,
   so every page's newsletter band now matches without needing a
   page-scoped modifier class. Text flipped light-on-dark: eyebrow and
   headline paper, body copy solid paper (not a dimmed rgba blend, see
   the homepage's own header comment on why a translucent paper reads
   pink over this background), form rule/placeholder a light rgba,
   input text paper, .link-arrow ("Join us") keeps its default tomato,
   already reads well here. Eyebrow kept at the shared 13px/700 spec
   rather than the smaller/lighter 11px/500 Sarah asked for specifically
   on the homepage, that was a homepage-only refinement, flag if it
   should generalize too. */
.cta-band {
  background: var(--aubergine);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.cta-eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper);
  margin-bottom: 14px;
}

.cta-headline {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 40px;
  color: var(--paper);
  margin-bottom: 12px;
}

.cta-body { font-size: 16px; color: var(--paper); line-height: 1.55; max-width: 320px; }

.cta-form {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid rgba(255,250,243,0.3);
  padding-bottom: 14px;
}

.cta-form input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-family: 'Archivo', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--paper);
}
.cta-form input::placeholder { color: rgba(255,250,243,0.55); }

.cta-form .link-arrow { flex-shrink: 0; font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 700; }
/* 2026-09-10: explicit marketing-consent fine print under every
   newsletter form sitewide, per Sarah's compliance request ("form
   consent"). Solid var(--paper), de-emphasized by size alone rather
   than opacity/rgba, deliberately: any translucent-paper blend
   (including CSS `opacity` on the element itself, which blends the
   same way) reads as dusty magenta against this aubergine background,
   the "muddy pink" issue already fixed everywhere else text sits on
   this color (see .cta-body/.hiw-band-desc earlier in this file). */
.cta-consent { font-size: 12px; color: var(--paper); margin-top: 10px; }
.cta-form-done { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 22px; color: var(--paper); padding: 10px 0; }
.cta-consent a { color: var(--paper); text-decoration: underline; }

/* ── FOOTER ── */
footer { padding: 64px 48px 32px; background: var(--paper); }

.footer-top {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 44px;
}
/* 2026-09-24: CSS Grid tracks don't shrink below their content's
   min-content width by default, so a long unbroken word/link label in
   a .footer-col could force its track wider than the 1fr math allows --
   on mobile, with only ~280px of content width to split across columns,
   that pushed part of the footer past the viewport edge (silently
   clipped by body's overflow-x:hidden, not scrollable to see it -- this
   is the "half the footer is off screen" Sarah reported). min-width: 0
   lets the grid track actually shrink to the column width and wrap
   text normally instead of overflowing it. */
.footer-col { min-width: 0; }

.footer-col h5 {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--espresso);
  margin-bottom: 18px;
}

.footer-col a {
  display: block;
  font-size: 14.5px;
  font-weight: 400;
  color: var(--espresso-70);
  text-decoration: none;
  margin-bottom: 12px;
  transition: color 0.2s;
}
.footer-col a:hover { color: var(--aubergine); }
.footer-col .coming-soon-link { opacity: 0.4; cursor: default; pointer-events: none; }
/* 2026-09-10: re-opens the cookie consent banner (see below), a plain
   footer link styled identically to its siblings via .footer-col a
   above, this rule just exists so it's not an orphaned/unstyled class
   as far as anyone auditing the CSS is concerned. */
.cookie-prefs-link { cursor: pointer; }

.footer-divider { border: none; border-top: 0.5px solid var(--espresso-15); margin-bottom: 28px; }

/* 2026-09-24, per Sarah: replaces the homepage-only "GH mark in a 5th
   footer-top grid column" trial from 2026-09-11 (which she found looked
   crunched, especially on mobile once the social row got stacked into
   that same narrow column -- see the removed .footer-logo/.footer-top-
   with-logo rules that used to live page-scoped in index.html) and the
   nav-bar social icons trial from 2026-09-22 (also reverted, see
   styles.css history) with one shared, sitewide layout: the GH mark
   centered above the tagline, with the social row centered below it,
   all as a single stacked block between the link columns and the
   copyright line. Same shared class on every page now, no more
   homepage-only carve-out. */
.footer-brand { display: flex; flex-direction: column; align-items: center; }
.footer-brand-logo { width: 44px; height: 44px; display: block; margin-bottom: 16px; }

.footer-tagline {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 17px;
  color: var(--espresso-70);
  text-align: center;
  margin-bottom: 20px;
}

.footer-bottom {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 28px;
}

.footer-social { display: flex; gap: 22px; list-style: none; flex-wrap: wrap; justify-content: center; }
.footer-social a {
  font-size: 13px;
  font-weight: 500;
  color: var(--espresso-70);
  text-decoration: none;
  transition: color 0.2s;
}
.footer-social a:hover { color: var(--aubergine); }

.footer-bottom p { font-size: 13px; color: var(--espresso-50); }

/* ── COOKIE CONSENT BANNER ──
   2026-09-10: added sitewide per Sarah's compliance request. Notice +
   opt-out style, NOT a block-until-accept gate: non-essential cookies
   (Klaviyo, and analytics once GA4 is wired in) load normally by
   default, same as they do today. This banner discloses that and gives
   a visible, one-click way to opt out, which is what current US state
   privacy laws (CCPA/CPRA and similar) actually require for a site
   shipping US-only, rather than the stricter EU/GDPR-style "nothing
   loads until you click Accept" pattern, which would cost real
   analytics data for no legal reason here. If the business starts
   shipping to or marketing toward the EU/UK, this should be revisited
   for an opt-in gate instead.
   Persisted in localStorage (not a cookie of its own, deliberately, so
   the banner about cookies doesn't itself require a cookie to work).
   The identical HTML block, and a matching <script> with the show/
   hide/opt-out logic, are duplicated on every page (see each page's
   closing <script> tags), the same "no shared JS file, duplicate and
   keep in sync" pattern the nav-scroll behavior already uses site-
   wide. A "Cookie Preferences" link in the footer's Support column
   re-opens the banner any time so a visitor can change their mind. */
.cookie-banner {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 300;
  background: var(--aubergine);
  color: var(--paper);
  padding: 20px 48px;
}
.cookie-banner.visible { display: block; }
.cookie-banner-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.cookie-banner-text { font-size: 14px; line-height: 1.5; max-width: 640px; color: var(--paper); }
.cookie-banner-text a { color: var(--paper); text-decoration: underline; }
.cookie-banner-btns { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.cookie-banner-optout {
  background: none;
  border: none;
  font-family: 'Archivo', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--paper);
  text-decoration: underline;
  cursor: pointer;
  padding: 4px 0;
}
.cookie-banner-optout:focus-visible, .cookie-banner-accept:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; }
.cookie-banner-accept {
  font-family: 'Archivo', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--tomato);
  color: var(--paper);
  border: none;
  border-radius: 100px;
  padding: 11px 24px;
  cursor: pointer;
  white-space: nowrap;
}

/* ── RESPONSIVE (shared: nav, section padding tiers, footer) ── */
@media (max-width: 900px) {
  nav { padding: 0 24px; height: 76px; top: -16px; } /* 2026-10-05: same no-jump header as desktop, 76px with 16px sliding off = 60px visible */
  nav.nav-scrolled { padding-top: 16px; }
  .nav-logo { font-size: 26px; }
  nav.nav-scrolled .nav-logo { font-size: 19px; }
  .nav-toggle { display: flex; }
  .nav-links {
    gap: 4px;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    background: var(--paper);
    padding: 8px 24px 24px;
    box-shadow: 0 12px 24px rgba(42,27,21,0.1);
    border-bottom: 0.5px solid var(--espresso-15);
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: max-height 0.25s ease, opacity 0.2s ease;
  }
  /* 2026-09-24: bumped from 320px -- with the Shop dropdown now able to
     open inline (see .nav-shop-menu override below), the fully-expanded
     mobile menu (4 links + 2 dropdown sub-links) needs more room than
     320px gave it, or the extra rows get clipped by this same
     overflow:hidden container. */
  nav.nav-open .nav-links { max-height: 460px; opacity: 1; pointer-events: auto; }
  .nav-links li { width: 100%; }
  .nav-links li:not(:last-child) a { display: block; padding: 12px 0; opacity: 1; }
  .nav-links li:last-child { margin-top: 10px; }
  .nav-links li:last-child a { display: inline-block; }
  /* 2026-09-24, per Sarah: "no way to extend the Shop button to include
     Shop Themes and Shop Activities" on mobile. The tap-to-open JS
     (toggleShopMenu, in each page's own script) was already working --
     the dropdown just rendered as an absolutely-positioned floating
     card (the desktop hover-menu treatment), which the .nav-links
     overflow:hidden above clips into invisibility on mobile. Switching
     it to position:static makes it part of the normal stacked list
     instead of a floating card, so it just pushes the list taller
     (accounted for in the max-height bump above) rather than getting
     clipped. */
  .nav-shop-menu {
    position: static;
    box-shadow: none;
    border: none;
    border-radius: 0;
    padding: 0 0 0 14px;
    min-width: 0;
  }
  /* .nav-links li:last-child a { display: inline-block } above is a
     descendant selector, so without this override it would also catch
     Themes/Activities inside .nav-shop-menu and squeeze them into
     inline-block instead of full-width tappable rows. Higher
     specificity (3 classes) to win that fight. */
  .nav-links li.nav-shop .nav-shop-menu a { display: block; padding: 10px 0; }

  section { padding: 48px 24px; }
  .section-tight { padding-top: 32px; padding-bottom: 32px; }
  .section-roomy-top { padding-top: 56px; }

  .eyebrow, .statement-eyebrow, .closer-eyebrow, .cta-eyebrow { font-size: 12px; }

  .cta-band { grid-template-columns: 1fr; gap: 28px; }
  .cta-headline { font-size: 32px; }

  footer { padding: 48px 24px 28px; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 24px; }

  .cookie-banner { padding: 16px 24px; }
  .cookie-banner-inner { flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* Page-specific responsive rules (hero, product grids, step layout, etc.)
   stay in each page's own <style> block, below this shared sheet. */

/* ── GATHERING CARDS (shared, 2026-10-01) ──
   The framed product card from Browse Gatherings (VOL. tag on the photo,
   burgundy name, uppercase metadata, status line, 2px burgundy frame).
   Moved here from gatherings.html so How It Works step 01 can reuse the
   exact same component instead of a separate photo mosaic. Markup:
   <a class="gath-catalog-card"> > .gath-catalog-img (.gath-catalog-vol +
   img) > .gath-catalog-name > .gath-catalog-tags > .gath-catalog-status */
.gath-catalog-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px 24px; } /* 2026-10-01: 4 across, same 24px gutter as the VOL. grid below so the two sections line up */
/* 2026-10-01: framed with the same 2px burgundy outline as the VOL.
   cards below so both sections read as one system. Photo sits flush
   inside the frame; text gets its own padding. */
.gath-catalog-card {
  display: block;
  text-align: left;
  background: var(--paper);
  border: 2px solid #5A0A2A;
  padding: 0 0 16px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
  width: 100%;
  text-decoration: none;
  /* 2026-10-05, per Sarah: <button> cards (waitlist ones, e.g. Apartment
     Café) vertically centre their contents when the grid stretches them,
     leaving a white strip above the photo. Pin contents to the top. */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.gath-catalog-img { position: relative; aspect-ratio: 4 / 3.4; overflow: hidden; border-radius: 0; margin-bottom: 14px; border-bottom: 2px solid #5A0A2A; }
.gath-catalog-card > :not(.gath-catalog-img) { margin-left: 18px; margin-right: 18px; }
.gath-catalog-card:hover, .gath-catalog-card:focus-visible { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(42,27,21,0.14); }
.gath-catalog-vol { position: absolute; top: 10px; right: 10px; z-index: 1; background: var(--paper); color: var(--aubergine); font-size: 11px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; padding: 4px 8px; }
.gath-catalog-tags { display: block; font-size: 11px; font-weight: 500; letter-spacing: 0.03em; text-transform: uppercase; color: var(--espresso-70); margin: 2px 0 8px; }
.gath-catalog-tags i { font-style: normal; margin: 0 5px; }
.gath-catalog-img img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; transition: transform 0.3s ease; }
.gath-catalog-card:hover .gath-catalog-img img { transform: scale(1.03); }
.gath-catalog-name { display: block; font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 500; font-size: 26px; line-height: 1.1; color: var(--name); }
/* 2026-09-29, per Sarah: the top tier's 4 concept-photo cards (Sicilian
   Aperitivo, Apartment Café, 29 Again Birthday Party, Wine & Cheese
   Club) get a clear "upcoming" label instead of a de-emphasized price
   swap -- her point was that a deliberate label makes the photo/real
   gap read as intentional rather than accidental. Own line under the
   name (not inline in .gath-catalog-head next to it), bold uppercase
   tracked type in tomato so it reads as a tag, not muted like the old
   .is-soon price treatment. */
/* 2026-09-29, per Sarah: don't flatten every not-yet-live card to the
   same "Coming soon" -- give people the real signal you have. Tiny
   3-tier status system, same class across the photo cards above and
   the typographic cards below: is-now (confident, solid espresso) for
   what's actually buyable today, is-coming (tomato, same warmth as the
   waitlist CTA) for a named month/season, is-works (muted espresso-50)
   for anything with no target window yet. */
.gath-catalog-status { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 6px; }
.gath-catalog-status.is-now { color: var(--espresso); }
.gath-catalog-status.is-coming { color: var(--tomato); }
.gath-catalog-status.is-works { color: var(--espresso-50); }
@media (max-width: 900px) { .gath-catalog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .gath-catalog-grid { grid-template-columns: 1fr; } }

/* ── 2PX CORNERS EVERYWHERE (2026-10-01, per Sarah) ──
   "Make everything 2." Pill buttons (.btn-pill) and circles keep their
   shape; every other rounded element on the public pages is squared to
   2px. Several of these are defined in each page's own <style> block
   (which loads after this file), hence !important -- one place to keep
   the rule instead of 20 per-page edits. Add new selectors here rather
   than giving new components their own radius. */
.nav-shop-menu, .nav-shop-menu a,
.popup-teaser,
.modal-box, .modal-form-row input,
.gath2-media,
input[type="text"], input[type="email"], input[type="date"], input[type="number"], input[type="tel"], select, textarea,
.guest-stepper, .guest-stepper button, .base-toggle-option, .addon-panel, .badge,
.cart-prompt-box,
.corp-card, .corp-input, .corp-textarea,
.contact-card, .contact-input, .contact-textarea,
.journal-card, .recipe-stats, .ghg-notes, .ghp-notes {
  border-radius: 2px !important;
}

/* ── FOUNDING FRIENDS PROMOS (2026-10-03, per Sarah) ──
   Three deliberate entry points, not in the nav:
   .ff-promo   homepage block (photo + headline + price line)
   .ff-slim    Browse Gatherings, between the catalog and Coming to the table
   .ff-callout product pages, under the Host Box add button */
.ff-promo { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center; padding-top: 64px; padding-bottom: 64px; }
.ff-promo-img { aspect-ratio: 4 / 3; overflow: hidden; border-radius: 2px; }
.ff-promo-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ff-promo-headline { margin-bottom: 14px; }
.ff-promo-headline .hl-italic, .ff-promo-headline .hl-black { display: block; font-size: 44px; }
.ff-promo-headline .hl-black { color: var(--hl-accent); }
.ff-promo-meta { font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--name); margin-bottom: 14px; }
.ff-promo-body { font-size: 16px; color: var(--body); line-height: 1.6; margin-bottom: 24px; max-width: 440px; }

.ff-slim { padding-top: 0; padding-bottom: 48px; }
.ff-slim-inner { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; background: var(--mushroom, #F2E9E2); border-radius: 2px; padding: 26px 32px; }
.ff-slim-headline { font-size: 30px; line-height: 1.1; }
.ff-slim-headline .hl-italic { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 500; color: var(--hl-serif); }
.ff-slim-headline .hl-black { font-family: 'Archivo Black', sans-serif; color: var(--hl-accent); letter-spacing: -0.5px; }
.ff-slim-body { font-size: 15px; color: var(--body); line-height: 1.5; flex: 1; min-width: 240px; max-width: 420px; }

.ff-callout { margin-top: 18px; padding-top: 16px; border-top: 0.5px solid var(--espresso-15); font-size: 14px; color: var(--espresso-70); line-height: 1.55; max-width: 460px; }
.ff-callout a { color: var(--name); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }

@media (max-width: 900px) {
  .ff-promo { grid-template-columns: 1fr; gap: 24px; padding-top: 48px; padding-bottom: 48px; }
  .ff-promo-headline .hl-italic, .ff-promo-headline .hl-black { font-size: 34px; }
  .ff-slim-inner { padding: 22px 20px; }
  .ff-slim-headline { font-size: 24px; }
}

/* 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; } }

/* ── AFFILIATE NOTE (2026-10-09, Sarah's affiliate handoff) ──
   One-line disclosure that sits right under the heading on any page with
   affiliate links. To reuse, paste this line under the page's heading:
   <p class="affiliate-note">This page contains affiliate links, which means we may earn a small commission if you shop through them, at no cost to you. <a href="/affiliate-disclosure.html">Learn more</a>.</p>
   Affiliate links themselves: target="_blank" rel="sponsored noopener". */
.affiliate-note { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 16px; line-height: 1.45; color: var(--espresso-70); margin: 14px 0 18px; max-width: 640px; }
.affiliate-note a { color: var(--name); text-decoration: underline; text-underline-offset: 2px; }

/* 2026-10-26 (Sarah): social icons right under the newsletter sign-up
   (.cta-band), cream on burgundy, so following us is obvious. Icons are
   inline SVG (Simple Icons, CC0) with fill: currentColor. */
.cta-social { display: flex; gap: 22px; margin-top: 22px; }
.cta-social a { color: var(--paper); display: inline-flex; opacity: 0.92; transition: opacity 0.15s ease; }
.cta-social a:hover, .cta-social a:focus-visible { opacity: 1; }
.cta-social svg { width: 28px; height: 28px; fill: currentColor; display: block; }