/* ═══════════════════════════════════════════════════════════════
   BeeBhakti · styles.css
   Single stylesheet for the whole site.

   Colour values with an 8-digit hex (e.g. #D4A14145) are the brand
   colours with an alpha suffix, matching the previous inline styles.
   Dynamic, data-driven colours are passed from the components as the
   CSS variable --c (e.g. an event's accent colour).

   Contents:
     1. Fonts & design tokens
     2. Global styles
     3. Animations
     4. Typography
     5. Layout
     6. Header & navigation
     7. Buttons
     8. Cards & sections
     9. Forms
    10. Footer
    11. Utilities
    12. Responsive styles
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. Fonts & design tokens ─────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Montserrat:wght@300;400;500;600&family=DM+Mono:wght@400;500&display=swap');

:root {
  --honey:      #D4A141;   /* Golden Honey */
  --gold:       #E8B84B;   /* lighter honey for gradients */
  --saffron:    #E8C060;   /* warm highlight */
  --cream:      #F5EFE6;   /* Warm Cream */
  --petal:      #FAF3EC;   /* slightly warmer cream */
  --warm-white: #FBF6EE;   /* near white with warmth */
  --earth:      #8B6230;   /* mid earth */
  --deep-earth: #5B3E1F;   /* Earthy Brown */
  --sage:       #6E9DB8;   /* Sky Blue (online/calm tags) */
  --rose:       #F7C8C0;   /* Lotus Pink */
  --dusk:       #7A5535;   /* warm dusk */
  --dark-bg:    #231204;   /* deep warm dark */
  --mid-bg:     #33200C;   /* warm mid dark */
  --text-dark:  #3A200A;   /* deep earthy text */
  --text-mid:   #5B3E1F;   /* Earthy Brown for text */
  --text-light: #87683C;   /* lighter warm text */
  --error:      #B3261E;

  --font-serif: 'Playfair Display', Georgia, serif;
  --font-sans:  'Montserrat', system-ui, sans-serif;
  --font-mono:  'DM Mono', 'SF Mono', monospace;

  --grad-honey:  linear-gradient(135deg, var(--honey), var(--gold));
  --grad-earth:  linear-gradient(160deg, var(--deep-earth), var(--mid-bg));
  --grad-night:  linear-gradient(160deg, var(--dark-bg), var(--dusk));

  /* ── The fluid layout spine ──────────────────────────────────
     One gutter, one shell, one rhythm. Everything below is a
     continuous function of the viewport rather than a set of
     breakpoints, so the page keeps redistributing space as the
     window grows instead of jumping at four fixed sizes.

     --page-edge is the site's single gutter: the header, every page
     title and every section share it, so content always begins on
     the same line as the BeeBhakti logo. It grows with the viewport
     (a 20px margin on a phone is generous; on a 27" display it would
     look like a mistake) and stops at 72px so ultrawide screens get
     their air from the shell instead. */
  --page-edge:   clamp(20px, 4vw, 72px);
  --page-pad-x:  var(--page-edge);

  /* Content shells. Three tiers, each fluid between a floor (never
     narrower than the design was before) and a ceiling (so a 4K
     display never stretches a line of text past readability):
       wide   — card and map grids, the widest compositions
       mid    — three-across card rows, calendars, feature blocks
       read   — running prose; capped near 80 characters
       narrow — single-field forms and short invitations
     Below the floor each one simply follows its parent (min(100%,…)),
     which is what keeps phones and tablets working. */
  --w-wide:   clamp(1100px, 84vw, 1660px);
  --w-mid:    clamp(960px,  72vw, 1360px);
  --w-read:   clamp(780px,  52vw,  880px);
  --w-narrow: clamp(520px,  44vw,  660px);

  /* Vertical rhythm and gaps scale on the same curve as the gutter,
     so the space between things stays in proportion to the space
     around them at every resolution. */
  --section-pad-y: clamp(48px, 5.2vw, 108px);
  --gap-xs: clamp(6px,  0.5vw, 10px);
  --gap-sm: clamp(10px, 0.9vw, 16px);
  --gap-md: clamp(16px, 1.5vw, 28px);
  --gap-lg: clamp(22px, 2.2vw, 40px);
  --gap-xl: clamp(30px, 3.2vw, 60px);
  /* Card grids get a gap of their own, deliberately tighter than
     --gap-md. A gap that grows as fast as the page does eats the room
     the next column needed, so a wider window can end up with FEWER,
     fatter cards — the opposite of the point. */
  --gap-grid: clamp(16px, 1.2vw, 24px);

  /* Event-type colours — one muted, palette-friendly colour per
     category, used everywhere a type appears (card badges, filter
     pills, map legend). */
  --type-festival:   #9A6794;   /* soft plum */
  --type-retreat:    #5E8CAD;   /* muted sky blue */
  --type-workshop:   #C2762F;   /* warm orange */
  --type-kirtan:     #C08A28;   /* golden honey */
  --type-course:     #4E938A;   /* soft teal */
  --type-temple:     #6F9060;   /* sage green (temple programmes) */
  --type-satsang:    #7E8A50;   /* muted olive */
  --type-pilgrimage: #B0684C;   /* warm terracotta */
  --type-online:     #C0708A;   /* dusty lotus pink */
}

/* Type classes: set the shared accent variable --c, which the .tag,
   .card-accent, and .type-pill rules already consume. */
.t-festival   { --c: var(--type-festival); }
.t-retreat    { --c: var(--type-retreat); }
.t-workshop   { --c: var(--type-workshop); }
.t-kirtan     { --c: var(--type-kirtan); }
.t-course     { --c: var(--type-course); }
.t-temple     { --c: var(--type-temple); }
.t-satsang    { --c: var(--type-satsang); }
.t-pilgrimage { --c: var(--type-pilgrimage); }
.t-online     { --c: var(--type-online); }

/* ── 2. Global styles ─────────────────────────────────────────── */
* { box-sizing: border-box; margin: 0; padding: 0; font-family: var(--font-sans); }
/* The site uses no italics anywhere: the tags browsers slant by
   default are reset so new copy can never introduce one. */
em, i, cite, var, dfn, address, blockquote, q { font-style: normal; }
html, body { margin: 0; padding: 0; }
#root { min-height: 100svh; }

.app {
  font-family: var(--font-sans);
  background: var(--warm-white);
  min-height: 100svh;
  color: var(--text-dark);
  /* clip (not hidden) so position: sticky keeps working inside */
  overflow-x: clip;
}

::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--petal); }
::-webkit-scrollbar-thumb { background: #E8C06055; border-radius: 3px; }

/* ── 3. Animations ────────────────────────────────────────────── */
@keyframes petalFall { 0%{opacity:0;transform:rotate(45deg) translateY(0);} 10%{opacity:.6;} 90%{opacity:.2;} 100%{opacity:0;transform:rotate(220deg) translateY(640px) translateX(60px);} }
@keyframes float { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-9px);} }
@keyframes beeFloat { 0%,100%{transform:translateY(0) rotate(-4deg);} 40%{transform:translateY(-14px) rotate(4deg);} 70%{transform:translateY(-5px) rotate(0deg);} }
@keyframes fadeUp { from{opacity:0;transform:translateY(20px);} to{opacity:1;transform:translateY(0);} }
@keyframes fadeIn { from{opacity:0;} to{opacity:1;} }
@keyframes shimmer { 0%{background-position:-200% center;} 100%{background-position:200% center;} }
@keyframes lotusBloom { 0%,100%{transform:scale(1);opacity:.5;} 50%{transform:scale(1.35);opacity:1;} }
@keyframes beeDrift { 0%{transform:translateX(-40px);} 100%{transform:translateX(calc(100vw + 80px));} }
@keyframes beeOrbit { 0%{transform:rotate(0deg) translateX(46%) rotate(0deg);} 100%{transform:rotate(360deg) translateX(46%) rotate(-360deg);} }
@keyframes softGlow { 0%,100%{opacity:.25;} 50%{opacity:.6;} }
@keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:.5;} }

.fade-in { animation: fadeIn .9s ease; }

/* ── 4. Typography ────────────────────────────────────────────── */
/* ── Alignment system ─────────────────────────────────────────
   Headings, overlines, short leads, quotes, empty states and CTAs are
   centred; body copy, cards, lists, filters and forms are left-aligned
   for readability and fast scanning. Cards set their own alignment so
   they are never affected by a centred ancestor. */

/* Keyboard focus: one clear honey ring everywhere, only for
   keyboard navigation (mouse clicks stay clean) */
:where(a, button, [role="button"], input, select, textarea):focus-visible {
  outline: 2px solid var(--honey); outline-offset: 2px;
}

/* Small uppercase overline above headings */
.overline { font-size: 12px; font-weight: 700; letter-spacing: .2em; color: var(--honey); margin-bottom: 8px; white-space: nowrap; text-align: center; }
.overline--wide { letter-spacing: .22em; margin-bottom: 14px; opacity: .85; }
.overline--verse { letter-spacing: .22em; margin-bottom: 28px; opacity: .7; }

/* Serif section headings — shared base + per-section sizes */
.h2 { font-family: var(--font-serif); font-weight: 400; color: var(--deep-earth); font-style: normal; text-align: center; }
/* The vw term is gentler than it was (4vw hit its cap by ~1100px and
   then stopped responding); the caps are higher, so headings keep
   growing with the shell instead of freezing at laptop size. */
.h2--featured   { font-size: clamp(26px, 2.8vw, 52px); line-height: 1.1; }
.h2--philosophy { font-size: clamp(28px, 2.9vw, 54px); line-height: 1.2; margin-top: 20px; }
.h2--bhakti     { font-size: clamp(28px, 3vw, 56px); font-weight: 300; line-height: 1.15; margin-bottom: clamp(18px, 1.8vw, 32px); }
.h2--listing    { font-size: clamp(24px, 2.3vw, 42px); margin-top: 20px; margin-bottom: 12px; }
.h2--support    { font-size: clamp(24px, 2.4vw, 44px); margin-top: 20px; }
/* Over a quiet list of questions rather than a grid of cards, so a
   step down from the full section-heading size. Shallow slope: the
   shared .h2--support curve sits flat at 24px up to 1000px and then
   climbs hard to 44px, which is what made it feel oversized on a
   large screen and undersized on a laptop. Roughly 23 → 26 → 31 →
   36px from 375 to 1920. */
.h2--faq        { font-size: clamp(23px, 1.1vw + 15px, 36px); }
.h2--trust      { font-size: clamp(22px, 2.1vw, 40px); margin: 22px 0 20px; }
.h2--about      { font-size: clamp(22px, 1.9vw, 34px); margin: 22px 0 16px; text-align: center; }
/* A full sentence rather than a title, so it sits a step below the
   welcome headline. It reads as one line from about 560px upward —
   the sentence needs ~25× its font size, and the section always has
   more than that — so the old 30ch measure (which broke it over two
   lines at every size) is gone. On a small phone it still wraps, and
   balance keeps the two lines even rather than leaving one word
   stranded. */
.h2--features   { font-size: clamp(20px, 1.8vw, 33px); line-height: 1.35; margin-inline: auto; text-wrap: balance; }

/* Page titles live in the "Plain page title" block below (.page-head) */

/* Body copy — the one shared paragraph style, used on every page.
   Always spans the full width of its parent container; spacing
   overrides come from the margin utilities, never from max-width.
   The size drifts up gently on larger screens (17 → 18.5px) so a
   wider reading column keeps the same comfortable line length
   instead of simply fitting more words on a line. */
.prose { width: 100%; font-size: clamp(17px, 0.13vw + 16.4px, 18.5px); color: var(--text-mid); line-height: 1.85; margin: 0 0 clamp(14px, 1vw, 20px); text-align: left; }
.prose--sm { font-size: clamp(16px, 0.11vw + 15.5px, 17.5px); }

/* Decorative quote marks */
.quote-mark { font-size: 46px; color: var(--honey); opacity: .3; font-family: Georgia; line-height: .6; margin-bottom: 22px; }
.quote-mark--sm { font-size: 28px; opacity: .35; margin-bottom: 14px; }
.quote-mark--md { font-size: 36px; opacity: .35; margin-bottom: 18px; }

/* Inline SVG icon helpers */
.ic { flex-shrink: 0; vertical-align: -2px; }
.ic-b { flex-shrink: 0; }

/* ── 5. Layout ────────────────────────────────────────────────── */
/* svh, not vh: on phones the dynamic browser chrome makes 100vh
   taller than the visible page, which pushes content under the URL
   bar on first paint. */
.page { padding-top: 66px; min-height: 100svh; background: var(--warm-white); }
/* Page bodies that open flush with the header: the same left edge as
   the logo and the rail pages, so nothing shifts sideways as you
   move between pages.

   The shell is centred, not left-anchored. Up to the point where it
   reaches its cap this is the same thing — the gutter IS the margin,
   so the title still starts under the logo — but past the cap the
   whole page keeps its balance instead of hugging the left edge and
   leaving a growing void on the right. The header uses the identical
   shell (.nav-inner), so the logo and the content edge stay on one
   line at every width. */
.page-edge {
  width: min(100% - var(--page-edge) * 2, var(--w-wide));
  margin-inline: auto;
  padding-left: 0; padding-right: 0;
}
.container { width: 100%; margin-inline: auto; }
/* The width utilities are now fluid tiers rather than fixed pixels:
   each grows with the viewport and stops at a ceiling chosen for what
   it holds. min(100%, …) keeps them inside their parent on phones,
   where the section padding is what sets the width. */
.mw-520  { max-width: min(100%, var(--w-narrow)); }
.mw-560  { max-width: min(100%, var(--w-narrow)); }
.mw-640  { max-width: min(100%, clamp(640px, 48vw, 760px)); }
.mw-720  { max-width: min(100%, clamp(720px, 50vw, 820px)); }
.mw-780  { max-width: min(100%, var(--w-read)); }
.mw-840  { max-width: min(100%, clamp(840px, 56vw, 940px)); }
.mw-900  { max-width: min(100%, clamp(900px, 60vw, 1040px)); }
.mw-960  { max-width: min(100%, var(--w-mid)); }
.mw-980  { max-width: min(100%, var(--w-mid)); }
.mw-1060 { max-width: min(100%, var(--w-mid)); }
.mw-1100 { max-width: min(100%, var(--w-wide)); }

/* Long-form pages (Privacy) keep a reading measure inside the shell.
   The gutter is subtracted from the width rather than added as
   padding, so the column centres on exactly the same axis as every
   other centred block on the page. Declared after .container, whose
   width: 100% would otherwise win on equal specificity. */
.about-body {
  width: min(100% - var(--page-edge) * 2, var(--w-read));
  padding-block: clamp(44px, 5vw, 88px);
}

.z1 { position: relative; z-index: 1; }

/* Decorative layers */
.hex-bg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.float-layer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.float-petal { position: absolute; top: -20px; border-radius: 50% 0 50% 0; background: linear-gradient(135deg, #E8C06055, #F7C8C035); transform: rotate(45deg); }
.float-bee { position: absolute; left: -40px; }
.bee-bob { animation: beeFloat 2.6s ease-in-out infinite; }

/* Section shells. Every section is full-bleed and pads itself with
   the shared gutter; the container inside it carries the measure, so
   backgrounds run edge to edge while content stays balanced. */
.section-featured   { padding: var(--section-pad-y) var(--page-pad-x); background: var(--warm-white); }
.section-philosophy { padding: var(--section-pad-y) var(--page-pad-x); background: var(--petal); position: relative; overflow: hidden; }
.section-bhakti     { padding: var(--section-pad-y) var(--page-pad-x); background: var(--warm-white); position: relative; overflow: hidden; }
.section-verse      { padding: var(--section-pad-y) var(--page-pad-x); background: linear-gradient(135deg, var(--deep-earth) 0%, var(--mid-bg) 100%); text-align: center; position: relative; overflow: hidden; }
.section-news       { background: var(--petal); padding: var(--section-pad-y) var(--page-pad-x); text-align: center; }
.section-support    { padding: var(--section-pad-y) var(--page-pad-x); background: var(--petal); position: relative; overflow: hidden; }
.section-trust      { padding: var(--section-pad-y) var(--page-pad-x); background: var(--warm-white); }

/* One shared heading block for every section: centred overline,
   heading and short lead. Long body copy lives outside it and stays
   left-aligned. The gap below the heading grows with the section's
   own padding so the rhythm holds at every resolution. */
.section-head { text-align: center; margin-bottom: clamp(26px, 2.6vw, 52px); }
.section-head .prose { text-align: center; margin-left: auto; margin-right: auto; max-width: 68ch; }
.section-sub { font-size: clamp(14.5px, 0.16vw + 14px, 17px); color: var(--text-mid); line-height: 1.7; margin-top: 8px; text-align: center; }

/* Dark page heroes */
.page-hero { background: var(--grad-night); position: relative; overflow: hidden; }
.page-hero-content { position: relative; z-index: 1; margin: 0 auto; display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
.page-hero-content--center { align-items: center; text-align: center; }

.heart-divider { display: flex; align-items: center; gap: 12px; margin: 14px 0 12px; }
.heart-divider-line { width: 56px; height: 1px; background: #E8C06050; }
.heart-divider--sm { gap: 8px; margin: 4px 0 2px; }
.heart-divider--sm .heart-divider-line { width: 32px; background: #E8C06045; }
.icon-row { display: flex; align-items: center; }

/* ── 6. Header & navigation ───────────────────────────────────── */
/* The bar itself is full-bleed (the blur and the hairline run the
   whole width); its contents sit in the same shell as every page, so
   the logo lands exactly on the content edge — including past the
   point where the shell stops growing and starts centring. */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  background: #F5EFE6F8; backdrop-filter: blur(16px);
  border-bottom: 1px solid #D4A14130;
  padding: 0 var(--page-edge); height: 64px;
  display: flex; align-items: center;
}
.nav-inner {
  width: min(100%, var(--w-wide));
  margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--gap-md);
}
.nav-brand { display: flex; align-items: center; cursor: pointer; margin-right: clamp(20px, 2.4vw, 56px); }
.nav-brand-row { display: inline-flex; align-items: center; gap: 8px; flex-wrap: nowrap; }
.nav-logo { height: 38px; width: auto; mix-blend-mode: multiply; display: block; flex-shrink: 0; }
.nav-wordmark { font-family: var(--font-serif); font-size: 13px; font-weight: 700; color: var(--deep-earth); letter-spacing: .12em; line-height: 1; white-space: nowrap; }
.nav-wordmark-accent { color: var(--honey); }
/* The link row breathes as the header widens rather than staying a
   fixed cluster pinned to the right edge */
.nav-links { display: flex; align-items: center; gap: clamp(16px, 1.5vw, 34px); }

/* Nav text links */
.nl { color: var(--text-mid); text-decoration: none; font-family: var(--font-sans); font-size: 13px; font-weight: 400; letter-spacing: .06em; transition: color .2s; cursor: pointer; background: none; border: none; padding: 0; }
.nl:hover, .nl.on { color: var(--honey); }
.nl.on { border-bottom: 1.5px solid var(--honey); padding-bottom: 2px; }

/* "Share an Event" pill in the nav */
.nav-cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 20px; border-radius: 50px;
  background: var(--grad-honey);
  border: none; cursor: pointer;
  box-shadow: 0 3px 14px #D4A14140;
  transition: all .3s;
  font-family: var(--font-sans);
  font-size: 13px; font-weight: 500; letter-spacing: .04em; color: white;
}
.nav-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 20px #D4A14155; }

/* The join CTA next to Log in: outlined honey pill — visible as an
   action, quieter than the solid Share-an-event pill */
.nav-join {
  display: inline-flex; align-items: center;
  padding: 8px 18px; border-radius: 50px; cursor: pointer;
  background: transparent; border: 1.5px solid var(--honey);
  color: var(--honey-text, var(--honey));
  font-family: var(--font-sans); font-size: 13px; font-weight: 600;
  letter-spacing: .04em; white-space: nowrap;
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.nav-join:hover, .nav-join.on {
  background: #E8C06018; transform: translateY(-1px);
  box-shadow: 0 4px 14px #D4A14130;
}

/* Mobile hamburger */
.nav-burger { background: none; border: none; cursor: pointer; padding: 8px; display: flex; flex-direction: column; gap: 5px; }
.nav-burger-bar { width: 24px; height: 2px; background: var(--deep-earth); border-radius: 2px; transition: all .3s; }
.nav-burger.is-open .nav-burger-bar:nth-child(1) { transform: rotate(45deg) translateY(5px); }
.nav-burger.is-open .nav-burger-bar:nth-child(2) { opacity: 0; }
.nav-burger.is-open .nav-burger-bar:nth-child(3) { transform: rotate(-45deg) translateY(-5px); }

/* Data status banner */
.data-banner {
  position: fixed; top: 64px; left: 0; right: 0; z-index: 250;
  background: var(--error); color: white;
  padding: 10px 20px; text-align: center;
  font-family: var(--font-sans); font-size: 13px; line-height: 1.5;
}

/* Mobile menu overlay. justify-content: center is safe only while the
   list is shorter than the screen — on a phone held sideways, or a
   short window, it would centre a list taller than the overlay and
   cut off both ends unreachably. safe centring plus a scroll keeps
   every item available at any height, and the type steps down when
   there is genuinely no room. */
.mobile-menu {
  position: fixed; top: 64px; left: 0; right: 0; bottom: 0; z-index: 190;
  background: #F5EFE6FA; backdrop-filter: blur(20px);
  display: flex; flex-direction: column; align-items: center;
  justify-content: safe center; gap: 8px;
  padding: clamp(16px, 4vh, 40px) 16px;
  overflow-y: auto; overscroll-behavior: contain;
  animation: fadeIn .25s ease;
}
.mobile-menu-link { background: none; border: none; cursor: pointer; font-family: var(--font-serif); font-size: clamp(21px, 3.4vh, 28px); font-weight: 500; color: var(--deep-earth); padding: clamp(7px, 1.4vh, 12px) 32px; }
.mobile-menu-link.on { color: var(--honey); }
/* Account group at the foot of the mobile menu: avatar + name,
   then the account actions — one place, like any profile menu */
.mobile-menu-account {
  margin-top: 14px; padding-top: 20px; border-top: 1px solid #8B623022;
  display: flex; flex-direction: column; align-items: center; gap: 0;
}
.mobile-menu-account-head {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--font-sans); font-size: 13px; letter-spacing: .04em;
  color: var(--text-light); margin-bottom: 6px;
}
.mobile-menu-link--account { font-size: 22px; padding: 8px 32px; }
.mobile-menu-link--signout {
  font-family: var(--font-sans); font-size: 15px; letter-spacing: .08em;
  color: var(--text-light); padding: 10px 32px;
}
.mobile-menu-cta {
  margin-top: 16px;
  background: var(--grad-honey);
  color: white; border: none; cursor: pointer;
  font-family: var(--font-sans);
  font-size: 15px; font-weight: 600; letter-spacing: .04em;
  padding: 13px 32px; border-radius: 50px;
  box-shadow: 0 4px 18px #D4A14145;
  display: inline-flex; align-items: center; gap: 10px;
}

/* Brand lockup (logo + BeeBhakti title on dark sections) */
.brand { display: inline-block; }
.brand-row { display: inline-flex; align-items: center; flex-wrap: nowrap; }
.brand-logo { width: auto; mix-blend-mode: screen; opacity: 0.9; display: block; }
.brand-title { font-family: var(--font-serif); font-weight: 700; letter-spacing: .1em; line-height: 1; }
.brand-title-accent { color: var(--saffron); }

/* First-visit verse overlay */
.verse-overlay {
  position: fixed; inset: 0; z-index: 300;
  background: linear-gradient(160deg, var(--dark-bg), var(--mid-bg));
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 0 32px; cursor: pointer;
  animation: fadeIn .8s ease;
}
.verse-overlay-quote { font-family: var(--font-serif); font-size: clamp(18px, 1.8vw, 34px); font-weight: 400; color: var(--cream); line-height: 1.8; text-align: center; max-width: min(100%, clamp(700px, 52vw, 1000px)); margin-bottom: 20px; }
.verse-overlay-ref { font-size: 12px; letter-spacing: .2em; color: var(--honey); font-family: var(--font-sans); }
.verse-lockup { margin-top: 40px; display: flex; flex-direction: column; align-items: center; }
.verse-wordmark { font-family: var(--font-serif); font-size: clamp(24px, 4vw, 34px); font-weight: 700; letter-spacing: .06em; color: var(--cream); line-height: 1; }
.verse-tagline { font-size: clamp(8px, 1.3vw, 12px); letter-spacing: .22em; color: #F5EFE670; font-family: var(--font-sans); font-weight: 500; text-transform: uppercase; text-align: center; white-space: nowrap; }
.verse-enter { font-size: 11px; color: #F5EFE650; margin-top: 32px; font-family: var(--font-sans); letter-spacing: .1em; }

/* ── Home hero ────────────────────────────────────────────────── */
.hero {
  min-height: 100svh;
  background: linear-gradient(180deg, var(--cream) 0%, var(--petal) 45%, var(--warm-white) 100%);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  position: relative; overflow: hidden;
  /* The arrival breathes in proportion to the screen it lands on */
  padding-top: clamp(76px, 7vh, 120px); padding-bottom: clamp(44px, 5vh, 90px);
}
.hero-stack {
  position: relative; z-index: 2;
  display: flex; flex-direction: column;
  align-items: center; text-align: center;
  padding: 0 var(--page-edge); width: 100%;
  /* Grows past its old 960px cap on large screens so the headline,
     stats and journey cards spread instead of sitting in a column
     with half the display empty on either side */
  max-width: calc(min(100%, max(960px, 68vw)) + var(--page-edge) * 2);
  opacity: 0; transform: translateY(22px);
  transition: all 1.2s cubic-bezier(.16, 1, .3, 1);
}
.hero-stack.is-in { opacity: 1; transform: translateY(0); }
/* Headline always sits on a single line. Below ~965px the size tracks
   the viewport so the full string fits the narrow column; from there
   it holds at 52px until the column itself starts growing (68vw
   passes 960px at ~1412px wide), and then rises with it to 62px.
   Written as nested min/max because the limit is the column, not the
   viewport — the string needs about 16.9× the font size in width. */
.hero-title {
  font-family: var(--font-serif); font-weight: 400; color: var(--deep-earth);
  line-height: 1.12; letter-spacing: -.01em; margin-bottom: 10px;
  font-size: min(calc(5.7vw - 3px), max(52px, min(calc(3.8vw - 2px), 62px)));
  max-width: 100%; white-space: nowrap;
}
.hero-title-accent {
  background: linear-gradient(135deg, var(--saffron), var(--gold), var(--honey));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-size: 200% 100%; animation: shimmer 4.5s linear infinite;
}
.hero-subline { font-family: var(--font-serif); font-size: clamp(16px, 1.4vw, 24px); color: var(--text-light); line-height: 1.6; margin: 0 0 clamp(16px, 1.8vw, 30px); }
.hero-alt-link { background: none; border: none; cursor: pointer; font-family: var(--font-sans); font-size: 13px; color: var(--text-mid); border-bottom: 1px solid #D4A14150; padding-bottom: 2px; margin-bottom: 6px; transition: color .2s; }
.hero-alt-link:hover { color: var(--honey); }
.hero-proof { font-size: clamp(13px, 0.35vw + 12.3px, 16.5px); color: var(--text-light); line-height: 1.75; max-width: min(100%, clamp(600px, 44vw, 780px)); margin: clamp(14px, 1.6vw, 26px) auto 0; font-family: var(--font-sans); }

/* Hero search bar */
.searchbar {
  display: flex; gap: 8px; flex-wrap: wrap;
  justify-content: center; align-items: stretch;
  background: white; border-radius: 60px;
  padding: 8px;
  box-shadow: 0 6px 30px rgba(91, 62, 31, 0.12);
  border: 1px solid #D4A14130;
  margin-bottom: 18px;
  max-width: 640px; width: 100%;
}
.searchbar-select { flex: 1; min-width: 120px; border: none; outline: none; cursor: pointer; background: transparent; font-family: var(--font-sans); font-size: 13.5px; color: var(--text-mid); padding: 10px 8px; }
.searchbar-select--first { min-width: 130px; padding: 10px 8px 10px 16px; }
.searchbar-divider { width: 1px; background: #D4A14125; margin: 6px 0; }
.searchbar-btn {
  background: var(--grad-honey);
  color: white; border: none; cursor: pointer;
  border-radius: 50px; padding: 12px 26px;
  font-family: var(--font-sans);
  font-size: 14px; font-weight: 600; letter-spacing: .03em;
  box-shadow: 0 3px 14px #D4A14145;
  transition: all .25s; flex-shrink: 0;
  display: flex; align-items: center; gap: 8px;
}
.searchbar-btn:hover { transform: translateY(-1px); }

/* Hero globe. Sized by whichever axis is scarcer: it grows on a wide
   display, and shrinks on a short one (a laptop in a 1440×720 window)
   rather than pushing the stats and journey cards below the fold. */
.hero-globe { position: relative; width: clamp(190px, min(24vw, 30vh), 340px); margin: clamp(4px, 1vh, 14px) 0 2px; display: flex; align-items: center; justify-content: center; }
.hero-glow {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 140%; height: 140%; border-radius: 50%;
  pointer-events: none; z-index: 0;
  background: radial-gradient(circle, #E8C06014 0%, transparent 62%);
  animation: softGlow 6s ease-in-out infinite;
}
.hero-globe-img { position: relative; z-index: 1; width: 100%; height: auto; mix-blend-mode: multiply; user-select: none; pointer-events: none; display: block; }
.globe-bloom {
  position: absolute;
  width: 10px; height: 10px; border-radius: 50%;
  background: radial-gradient(circle, var(--rose) 20%, #D4A14170 60%, transparent 100%);
  box-shadow: 0 0 12px 4px #F7C8C060;
  animation: lotusBloom 8.4s ease-in-out infinite;
  pointer-events: none; z-index: 2;
}
.globe-orbit { position: absolute; top: 50%; left: 50%; width: 0; height: 0; z-index: 3; animation: beeOrbit 26s linear infinite; pointer-events: none; }
.globe-orbit-bee { transform: translate(-50%, -50%); }

/* Hero stats */
.hero-stats { display: flex; gap: clamp(28px, 4.5vw, 90px); justify-content: center; flex-wrap: wrap; margin-top: clamp(4px, 1vh, 14px); }
.stat { text-align: center; }
.stat-num { font-family: var(--font-mono); font-size: clamp(24px, 1.9vw, 38px); font-weight: 500; color: var(--honey); line-height: 1; letter-spacing: -.02em; }
.stat-label { font-size: clamp(11px, 0.08vw + 10.6px, 12.5px); color: var(--text-light); letter-spacing: .14em; margin-top: 5px; white-space: nowrap; font-family: var(--font-sans); }

/* Scroll nudge */
.scroll-nudge { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 5px; opacity: .3; animation: float 2.2s ease-in-out infinite; }
.scroll-nudge-line { width: 1px; height: 28px; background: linear-gradient(var(--honey), transparent); }
.scroll-nudge-text { font-size: 10px; letter-spacing: .22em; color: var(--text-light); font-family: var(--font-sans); }

/* ── 7. Buttons ───────────────────────────────────────────────── */
.bg { display: inline-flex; align-items: center; justify-content: center; border-radius: 50px; font-family: var(--font-sans); font-size: 13px; font-weight: 600; letter-spacing: .04em; cursor: pointer; transition: all .3s; border: none; }
.bg-g { background: var(--grad-honey); color: white; padding: 12px 28px; box-shadow: 0 4px 18px #D4A14145; }
.bg-g:hover { transform: translateY(-2px); box-shadow: 0 8px 28px #D4A14160; }
.bg-o { background: transparent; color: var(--honey); border: 1.5px solid var(--honey); padding: 11px 26px; }
.bg-o:hover { background: var(--honey); color: white; }
.bg-gh { background: transparent; color: var(--cream); border: 1.5px solid #F5EFE640; padding: 11px 26px; }
.bg-gh:hover { border-color: #F5EFE680; background: #F5EFE610; }
/* Ghost button for LIGHT backgrounds — the cream .bg-gh above is
   invisible on petal/cream sections */
.bg-gh--light { color: var(--text-mid); border-color: #8B623040; }
.bg-gh--light:hover { color: var(--deep-earth); border-color: #8B623080; background: #8B623008; }
.bg--sm { padding: 7px 18px; font-size: 14px; }
.bg--block { padding: 12px 18px; text-decoration: none; }
.is-disabled { opacity: .45; pointer-events: none; }

/* Filter pill button */
.fb { background: transparent; border: 1px solid #E8C06045; color: var(--text-mid); padding: 7px 18px; border-radius: 50px; font-family: var(--font-sans); font-size: 13px; cursor: pointer; transition: all .25s; white-space: nowrap; }
.fb:hover, .fb.on { background: var(--honey); color: white; border-color: var(--honey); }

.btn-row { display: flex; gap: 12px; flex-wrap: wrap; }

/* ── 8. Cards & sections ──────────────────────────────────────── */
/* Coloured tag chip — accent colour arrives as --c */
.tag {
  display: inline-block; padding: 3px 11px; border-radius: 20px;
  background: color-mix(in srgb, var(--c, var(--honey)) 9.4%, transparent);
  color: var(--c, var(--honey)); font-size: 11px;
  font-family: var(--font-sans); font-weight: 600;
  letter-spacing: .05em;
  border: 1px solid color-mix(in srgb, var(--c, var(--honey)) 20.8%, transparent);
}

.featured-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 20px;
  background: linear-gradient(135deg, #D4A14122, #E8C06018);
  border: 1px solid #D4A14140; font-size: 11px;
  color: var(--honey); font-family: var(--font-sans);
  font-weight: 600; letter-spacing: .06em;
}

/* Event card (featured grid). Each card is its own container: what
   happens inside it is decided by how wide THE CARD ended up, not by
   how wide the window is — the same card sits in a 3-across homepage
   row, a 5-across events grid and a single mobile column, and it
   should read correctly in all three. */
.ec { container-type: inline-size; background: white; border: 1px solid #E8C06022; border-radius: 16px; padding: clamp(20px, 1.6vw, 32px); cursor: pointer; transition: all .3s; position: relative; overflow: hidden; font-family: var(--font-sans); display: flex; flex-direction: column; text-align: left; }
.ec .card-foot { margin-top: auto; }
.ec:hover { transform: translateY(-4px); box-shadow: 0 12px 40px #D4A14118; border-color: #D4A14155; }
.gc { background: white; border: 1px solid #E8C06022; border-radius: 16px; padding: 24px; cursor: pointer; transition: all .3s; }
.gc:hover { transform: translateY(-3px); box-shadow: 0 10px 36px #D4A14118; border-color: #D4A14150; }

/* Shared card internals (featured + map event cards) */
.card-accent { position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: 16px 16px 0 0; background: linear-gradient(90deg, var(--c, var(--honey)), transparent); }
.card-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; }
.card-tags { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
.card-loc { font-size: 12px; color: var(--text-light); font-style: normal; }
.card-title { font-family: var(--font-serif); font-size: 20px; font-weight: 600; color: var(--deep-earth); margin-bottom: 8px; line-height: 1.2; }
.card-desc { font-size: 14px; color: var(--text-mid); line-height: 1.55; margin-bottom: 16px; }
.card-foot { display: flex; justify-content: space-between; align-items: center; }
.card-date { font-size: 13px; color: var(--honey); font-weight: 600; }
.card-open { margin-top: auto; padding-top: 12px; font-size: 12px; color: var(--honey); font-weight: 600; }

.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-resp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* The event cards' own container queries live just after .map-card's
   rules further down, where they can win on source order. */

/* ── Card grids ───────────────────────────────────────────────
   Every grid tracks the viewport twice over: the gap grows with the
   shared rhythm, and the minimum column itself is fluid, so a grid
   adds a column when there is genuinely room for one instead of
   stretching three cards to twice their comfortable width. The
   min(100%, …) wrapper is what keeps a 320px phone from forcing a
   track wider than the screen. */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, clamp(260px, 15vw, 300px)), 1fr)); gap: var(--gap-grid); }
.res-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, clamp(256px, 14.5vw, 300px)), 1fr)); gap: var(--gap-grid); }
.text-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, clamp(250px, 14vw, 290px)), 1fr)); gap: var(--gap-grid); }
.pod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, clamp(288px, 16.5vw, 340px)), 1fr)); gap: var(--gap-grid); }
.philosophy-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: var(--gap-lg); }
.listing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: var(--gap-md); }
/* auto-FILL, not auto-fit: empty tracks are kept, so three buttons in
   a wide panel stay button-sized instead of stretching to fill it */
.action-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, clamp(200px, 14vw, 250px)), 1fr)); gap: var(--gap-sm); }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: var(--gap-sm); margin-top: 18px; }
/* Four small icon tiles: capped so they stay tiles rather than
   stretching to a quarter of a very wide page each */
.support-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, clamp(180px, 13vw, 240px)), 1fr)); gap: var(--gap-md); max-width: min(100%, 1120px); margin-inline: auto; }

/* Philosophy value cards */
.value-card { container-type: inline-size; background: white; border-radius: 20px; padding: clamp(26px, 2.5vw, 46px) clamp(22px, 2vw, 38px); border: 1px solid color-mix(in srgb, var(--c, var(--honey)) 12.5%, transparent); text-align: center; }
.value-title { font-family: var(--font-serif); font-size: 22px; font-weight: 600; color: var(--c, var(--honey)); margin-bottom: 12px; }
.value-desc { font-size: 15px; color: var(--text-mid); line-height: 1.65; margin-bottom: 12px; }
.value-note { font-size: 13px; color: var(--text-light); font-style: normal; }
/* Scaled by the card's own width, so the three cards read the same
   whether they sit one-up on a phone or three-up on a large display */
.value-title { font-size: clamp(22px, 5.6cqi, 27px); }
.value-desc  { font-size: clamp(15px, 4.1cqi, 17px); }
.value-note  { font-size: clamp(13px, 3.6cqi, 14.5px); }

/* Rotating verse section */
.verse-text { font-family: var(--font-serif); font-size: clamp(18px, 1.7vw, 32px); font-weight: 300; font-style: normal; color: var(--cream); line-height: 1.75; margin-bottom: 18px; }
.verse-ref { font-size: 13px; color: var(--saffron); letter-spacing: .14em; margin-bottom: 6px; }
.verse-note { font-size: 13px; color: #F5EFE672; font-style: normal; }
.verse-dots { display: flex; gap: 8px; justify-content: center; margin-top: 28px; }
.verse-dot { width: 8px; height: 8px; border-radius: 4px; background: #D4A14135; border: none; cursor: pointer; transition: all .3s; }
.verse-dot.on { width: 26px; background: var(--honey); }

/* Verse cards (About page) */
.verse-card { background: var(--warm-white); border: 1px solid #D4A14128; border-radius: 16px; padding: 22px 26px; position: relative; overflow: hidden; text-align: center; }
.verse-card--dark { background: linear-gradient(135deg, var(--mid-bg), var(--dark-bg)); border-color: #D4A14125; padding: 28px 32px; }
.verse-card-text { font-family: var(--font-serif); font-size: 16px; font-style: normal; font-weight: 400; color: var(--text-mid); line-height: 1.75; margin-bottom: 14px; }
.verse-card--dark .verse-card-text { font-size: 19px; color: var(--cream); }
.verse-card-ref { font-size: 12px; letter-spacing: .14em; color: var(--honey); opacity: .85; }
.verse-card-note { font-size: 12px; color: var(--text-light); margin-top: 5px; font-style: normal; }
.verse-card--dark .verse-card-note { color: #F5EFE650; }

/* Seva / support section */
.seva { padding: 80px var(--page-pad-x); background: linear-gradient(160deg, var(--petal), var(--warm-white)); position: relative; overflow: hidden; }
/* Warm dusk band: darker than the light sections around it, but
   clearly lighter than the footer — the footer stays the single
   darkest element on every page, so nothing else reads as "the end" */
.seva--dark { background: linear-gradient(160deg, var(--dusk), var(--deep-earth)); }
.seva-inner { max-width: min(100%, clamp(840px, 58vw, 1040px)); margin: 0 auto; position: relative; z-index: 1; text-align: center; }
.seva-title { font-family: var(--font-serif); font-size: clamp(26px, 2.9vw, 50px); font-weight: 300; color: var(--deep-earth); line-height: 1.2; margin-bottom: clamp(14px, 1.4vw, 26px); font-style: normal; }
.seva--dark .seva-title { color: var(--cream); }
.seva-lead { font-size: clamp(16.5px, 0.16vw + 16px, 19px); color: var(--text-mid); line-height: 1.8; margin: 0 auto 12px; max-width: 68ch; }
.seva--dark .seva-lead { color: #F5EFE665; }
.seva-sub { font-size: clamp(15px, 0.14vw + 14.5px, 17.5px); color: var(--text-light); line-height: 1.75; margin: 0 auto clamp(30px, 3.4vw, 60px); font-style: normal; max-width: 70ch; }
.seva--dark .seva-sub { color: #F5EFE645; }
.seva-note { font-size: 13px; color: var(--text-light); margin-top: 20px; font-style: normal; }
.seva--dark .seva-note { color: #F5EFE635; }

/* Donation tiers */
.tier-row { display: flex; gap: var(--gap-md); justify-content: center; flex-wrap: wrap; margin-bottom: clamp(28px, 3vw, 52px); }
.tier { flex: 1 1 170px; max-width: clamp(200px, 15vw, 280px); background: white; border: 1.5px solid #E8C06035; border-radius: 16px; padding: clamp(20px, 1.8vw, 32px) clamp(14px, 1.3vw, 24px); cursor: pointer; transition: all .3s; text-align: center; }
.seva--dark .tier { background: #D4A14112; border-color: #D4A14125; }
.tier:not(.tier--highlight):hover { transform: translateY(-3px); }
.tier--highlight { background: var(--grad-honey); border: none; box-shadow: 0 8px 28px #D4A14145; }
.seva--dark .tier--highlight { background: var(--grad-honey); }
.tier-amount { font-family: var(--font-mono); font-size: 34px; font-weight: 500; color: var(--honey); line-height: 1; margin-bottom: 8px; letter-spacing: -.02em; }
.tier--highlight .tier-amount { color: white; }
.tier-label { font-size: 14px; font-weight: 600; color: var(--deep-earth); margin-bottom: 4px; font-family: var(--font-sans); }
.seva--dark .tier-label { color: var(--cream); }
.tier--highlight .tier-label { color: white; }
.tier-sub { font-size: 12px; color: var(--text-light); }
.seva--dark .tier-sub { color: #F5EFE645; }
.tier--highlight .tier-sub { color: rgba(255, 255, 255, 0.7); }

/* Seva CTA + thank-you state */
.seva-cta {
  background: var(--grad-honey);
  color: white; border: none; padding: 14px 36px;
  border-radius: 50px; font-family: var(--font-sans);
  font-size: 15px; font-weight: 600; letter-spacing: .03em;
  cursor: pointer; transition: all .3s;
  box-shadow: 0 6px 24px #D4A14145;
}
.seva-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 32px #D4A14160; }
.seva-thanks {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 32px; border-radius: 50px;
  background: var(--petal);
  border: 1.5px solid #D4A14150;
  font-family: var(--font-sans);
  font-size: 15px; color: var(--honey); font-style: normal;
}
.seva--dark .seva-thanks { background: #D4A14120; }

/* Listing tiers */
/* ── The listing section's layout system ──────────────────────
   Two edges, and only two. Card rows span the container; every
   piece of running text — the intro, the add-on intro, the
   end-of-period notice and the closing line — shares one centred
   measure. Before this the section had five different left edges
   (the container at 151, prose at 563, the add-on grid and the
   notice at 458) with alignment flipping between centred and left
   from block to block. */
.listing {
  --listing-measure: min(100%, clamp(560px, 48vw, 800px));
  --listing-step: clamp(34px, 3.2vw, 64px);
  padding: var(--section-pad-y) var(--page-pad-x);
  background: var(--petal); position: relative; overflow: hidden;
}
.listing .section-head .prose,
.listing .listing-note {
  max-width: var(--listing-measure);
  margin-inline: auto; text-align: center;
}
/* Desktop has far more room than the measure was using: the intro
   was wrapping to four short lines inside an 1100 container. The
   measure widens from 1000px up, so the whole section (intro, the
   end-of-listing notice, the closing note) keeps reading down one
   spine — only wider. Below 1000 nothing changes. */
@media (min-width: 1000px) {
  .listing { --listing-measure: min(100%, clamp(680px, 66vw, 980px)); }
  /* The closing seva note is one sentence and is meant to read as one
     line, so it takes the whole container rather than the section
     measure — the only place the spine widens, and only on desktop. */
  .listing .listing-note { max-width: 100%; }
}
/* Both heading blocks clear their cards by the same amount, so the
   pricing row and the add-on row sit on one rhythm */
.listing .section-head { margin-bottom: clamp(24px, 2.2vw, 42px); }

/* ── Every listing includes ───────────────────────────────────
   The shared features, once, between the intro and the grid: a
   quiet label over one horizontal row. It wraps to a column on a
   phone rather than being squeezed. */
.listing-includes {
  margin: 0 auto clamp(22px, 2.2vw, 40px);
  padding-top: clamp(4px, 0.6vw, 12px);
  text-align: center;
}
.listing-includes-label {
  display: block;
  font-family: var(--font-sans); font-size: 12px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--honey-text, var(--honey));
  margin-bottom: clamp(10px, 1vw, 16px);
}
.listing-includes-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(10px, 1.4vw, 34px);
}
.listing-includes-item {
  display: inline-flex; align-items: baseline; gap: 8px;
  font-family: var(--font-sans);
  font-size: clamp(13.5px, 0.12vw + 13px, 15px);
  line-height: 1.5; color: var(--text-mid);
}

.plan {
  container-type: inline-size;
  /* One token for the padding and the badge, so the badge sits on
     the same line as the content it labels. Tighter than it was:
     with the shared features lifted out, each card holds four short
     lines and does not need a deep frame around them. */
  --plan-pad-x: clamp(20px, 1.6vw, 30px);
  --plan-pad-y: clamp(22px, 1.8vw, 32px);
  background: white; border: 1.5px solid #E8C06030; border-radius: 20px;
  padding: var(--plan-pad-y) var(--plan-pad-x);
  position: relative; overflow: hidden; text-align: left;
}
/* Transparent border rather than none: the featured card keeps its
   dark ground and shadow, but its box metrics now match the other
   three exactly — with border:none its content sat 1.5px out of
   line with its neighbours and the card measured 3px wider. */
/* Distinct by ground and badge, not by weight: the shadow is lighter
   than it was so the featured card sits in the row rather than
   looming out of it. Same box metrics as the other three. */
.plan--highlight { background: var(--grad-earth); border-color: transparent; box-shadow: 0 6px 22px #D4A14126; }
.plan-badge-pos { position: absolute; top: var(--plan-pad-y); right: var(--plan-pad-x); }
.plan-tier { font-size: 12px; letter-spacing: .18em; color: var(--honey); margin-bottom: 10px; }
.plan--highlight .plan-tier { color: var(--saffron); }
.plan-price { font-family: var(--font-mono); font-size: 40px; font-weight: 500; color: var(--deep-earth); line-height: 1; margin-bottom: 4px; letter-spacing: -.02em; }
.plan--highlight .plan-price { color: var(--cream); }
.plan-price-note { font-size: 12px; white-space: nowrap; color: var(--text-light); margin-bottom: 6px; }
.plan--highlight .plan-price-note { color: #F5EFE655; }
/* Last line in the card now that the features live above the grid,
   so no trailing margin — the card's own padding closes it */
.plan-for { font-size: 14px; color: var(--text-mid); font-style: normal; margin-bottom: 0; }
/* The two-line reserve that used to sit here existed to keep the
   four feature lists starting on one line. Those now live above the
   grid, and the description is the last thing in the card, so its
   top already aligns across all four and the grid equalises the
   heights — the reserve would only add a blank line to every card. */
.plan--highlight .plan-for { color: #F5EFE670; }
.plan-feature { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.plan-star { color: var(--honey); font-size: 14px; line-height: 1.5; }
.plan-feature-text { font-size: 14px; color: var(--text-mid); line-height: 1.5; }
.plan--highlight .plan-feature-text { color: #F5EFE685; }
.listing-note { text-align: center; font-size: 14px; color: var(--text-light); margin-top: clamp(24px, 2.2vw, 44px); font-style: normal; line-height: 1.75; }

/* Resource cards (books, music, podcasts) — accent colour via --c.
   Its own container, so the body below adapts to the card rather
   than to the window (see the @container rules after .res-links). */
.res-card { container-type: inline-size; background: white; border: 1px solid #E8C06022; border-radius: 18px; overflow: hidden; transition: all .3s; display: flex; flex-direction: column; text-align: left; }
.res-card:hover { transform: translateY(-4px); box-shadow: 0 12px 40px #D4A14118; border-color: var(--hc, #D4A14155); }
.res-card-accent { height: 3px; background: linear-gradient(90deg, var(--c, var(--honey)), transparent); }
.res-card-body { padding: 22px 22px 20px; flex: 1; display: flex; flex-direction: column; }
.res-card-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; gap: 8px; }
.res-year { font-size: 12px; color: var(--text-light); flex-shrink: 0; }
.res-title { font-family: var(--font-serif); font-size: 21px; font-weight: 600; color: var(--deep-earth); line-height: 1.2; margin-bottom: 8px; }
.res-title--tight { margin-bottom: 4px; }
.res-title--pod { margin: 14px 0 4px; }
.res-subtitle { font-size: 13px; color: var(--text-light); font-style: normal; margin-bottom: 8px; line-height: 1.4; }
.res-author { font-size: 14px; color: var(--c, var(--honey)); font-weight: 600; margin-bottom: 14px; letter-spacing: .02em; }
.res-host { font-size: 14px; color: var(--c, var(--honey)); font-weight: 600; margin-bottom: 14px; }
.res-desc { font-size: 14px; color: var(--text-mid); line-height: 1.65; margin-bottom: 16px; flex: 1; }
.res-desc--pod { margin-bottom: 20px; }
.res-forwho { background: var(--petal); border-radius: 10px; padding: 9px 12px; font-size: 13px; color: var(--text-light); font-style: normal; line-height: 1.5; margin-bottom: 18px; }
.pod-platforms { display: flex; gap: 8px; flex-wrap: wrap; }

/* Resource image — the same 16:9 frame on every resource card
   (books, albums, sacred texts, podcasts, films & videos), so the
   grids stay even whatever the artwork's own proportions are. */
.res-img-wrap { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; flex-shrink: 0; background: #fff; }
/* The artwork is never cropped or zoomed: shown whole and centred
   inside the fixed 16:9 frame, on a uniform white ground */
.res-img { width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; }
/* On sacred-text cards the frame sits inside the card padding */
.text-card .res-img-wrap { border-radius: 10px; margin-bottom: 16px; }

/* Outlined pill link that fills with its accent colour on hover */
.pill-link {
  display: block; text-align: center; padding: 11px 0;
  border-radius: 50px; border: 1.5px solid var(--c, var(--honey));
  color: var(--c, var(--honey)); text-decoration: none;
  font-family: var(--font-sans); font-size: 14px; font-weight: 500;
  letter-spacing: .03em; transition: all .25s;
}
.pill-link:hover { background: var(--c, var(--honey)); color: white; }
.pill-link--sm { display: inline-flex; align-items: center; gap: 5px; padding: 8px 16px; font-size: 13px; letter-spacing: normal; }
/* Album cards carry one pill per streaming service, side by side in the
   same style; they stack if the card gets too narrow for both. */
.res-links { display: flex; gap: 8px; flex-wrap: wrap; }
.res-links .pill-link { flex: 1 1 120px; }

/* ── Inside a resource card ───────────────────────────────────
   Same idea as the event cards: padding and type are a percentage of
   the card's own width (cqi), clamped so they start where they are
   today and grow as the card does. A book card in a 4-across grid on
   a large display and the same card alone on a phone then look like
   deliberate versions of one another. */
.res-card-body {
  padding: clamp(22px, 6.4cqi, 32px) clamp(22px, 6.4cqi, 32px) clamp(20px, 5.8cqi, 28px);
}
.res-title { font-size: clamp(21px, 5.5cqi, 25px); }
.res-desc  { font-size: clamp(14px, 3.9cqi, 16px); }

/* Resources page */
/* ── Rail layout (Resources + Events) ─────────────────────────
   Desktop: a sticky rail on the left — the page's own sections on
   Resources, every filter on Events — with a plain title and the
   content in the column beside it. The rail spans both rows so it
   starts level with the title. No coloured hero band: the title is
   a simple serif line over a hairline rule, so the real content
   begins near the top of the page.
   Narrow screens: title first, then the rail, then the content. */
.rail-layout {
  display: grid;
  /* The rail is a proportion of the page, not a fixed slab: it widens
     with the shell so the filters/index never wrap more than they
     need, and the content column keeps the majority of the growth. */
  --rail-w: clamp(224px, 15vw, 300px);
  --rail-bleed: clamp(16px, 1.4vw, 30px);
  grid-template-columns: var(--rail-w) minmax(0, 1fr);
  grid-template-areas: "rail head" "rail content";
  column-gap: clamp(28px, 2.4vw, 56px); row-gap: clamp(22px, 2vw, 38px);
  align-items: start;
  /* The gutter is taken out of the width instead of added as margin,
     so the shell centres once it reaches its cap — the rail still
     starts under the logo (the header uses the same shell), and an
     ultrawide display no longer leaves a void down the right side. */
  width: min(100% - var(--page-edge) * 2, var(--w-wide));
  margin-inline: auto;
  padding: clamp(28px, 2.6vw, 52px) 0 clamp(56px, 6vw, 110px);
  position: relative;
}

/* ── The beeswax panel behind the rail ────────────────────────
   A warm wax surface running down the page's left edge, made of
   the same honeycomb geometry as the site's HexBg so it reads as
   brand rather than ornament. Three near-invisible layers: a comb
   texture, a soft sheen where light would catch poured wax, and a
   warm tint. It bleeds past the page edge to the viewport, and the
   mask melts it away toward the bottom so it never ends on a hard
   line. Kept faint enough that the honey-tinted active pill still
   reads as the brightest thing in the column. */
/* z-index 0, never -1: a negative pseudo-element paints before the
   backgrounds of block descendants, so .page's opaque warm-white
   would cover the wax entirely. Instead the panel sits at 0 and the
   grid's own children are lifted above it below. */
/* The bleed is measured from the shell to the viewport rather than
   from a fixed gutter, so the wax still reaches the left edge of the
   screen after the shell starts centring on wide displays. */
.rail-layout::before {
  content: ""; position: absolute; z-index: 0;
  top: 0; bottom: 0;
  left: calc((100% - 100vw) / 2);
  width: calc((100vw - 100%) / 2 + var(--rail-w) + var(--rail-bleed));
  border-radius: 0 20px 20px 0;
  /* Everything here is translucent so the page reads through the
     wax: a light warm wash, a comb impression at a fraction of its
     old weight, and a white sheen down the middle where the labels
     sit, which lifts them clear of the texture. */
  background-color: #E8D5AE1F;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='34.64' viewBox='0 0 30 34.64'%3E%3Cg fill='none' stroke='%23A87C2E' stroke-width='0.85' opacity='0.055'%3E%3Cpolygon points='15,2 28,9.5 28,25 15,32 2,25 2,9.5'/%3E%3Cpolygon points='30,19 43,26.5 43,42 30,49.5 17,42 17,26.5'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(100deg, #EFE0C608 0%, #FFFFFF73 46%, #EBD9B80F 100%);
  background-size: 46px 53.1px, auto;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 100%);
}
/* The wax edge: a hairline that fades out with the panel itself */
.rail-layout::after {
  content: ""; position: absolute; z-index: 0;
  top: 0; left: calc(var(--rail-w) + var(--rail-bleed)); width: 1px; height: 62%;
  background: linear-gradient(180deg, #D4A14100, #D4A14126 18%, #D4A14100);
}
@media (prefers-reduced-transparency: reduce) {
  .rail-layout::before { background-image: none; }
}
/* Events carries five filter groups, so its rail is a little wider */
.rail-layout--wide { --rail-w: clamp(248px, 16vw, 300px); }
/* No page title (Resources): drop the header row so the content
   starts level with the rail instead of below an empty cell */
.rail-layout--flush { grid-template-areas: "rail content"; }
/* The three grid children ride above the wax panel. The rail outranks
   the content column so the guide-search dropdown still opens over
   the map rather than behind it. */
.rail { grid-area: rail; align-self: start; position: sticky; top: 88px; z-index: 2; }
/* On a short window (a laptop at 1440×720, a browser sharing the
   screen with something else) a sticky rail taller than the viewport
   leaves its last filters permanently out of reach — so it scrolls
   within itself instead. Only here: at normal heights the rail fits,
   and letting it overflow keeps the guide-search dropdown free to
   open past the rail's bottom edge. */
@media (min-width: 1000px) and (max-height: 780px) {
  .rail {
    max-height: calc(100svh - 104px);
    overflow-y: auto; overscroll-behavior: contain;
    scrollbar-width: thin; padding-bottom: 12px;
  }
}
.rail-layout > .page-head { position: relative; z-index: 1; }
/* The nav rail's rows carry their own padding so the hover/active
   pill has room. Pulling the rail out by exactly that inset puts the
   labels and icons back on the page's left edge — the same line as
   the logo in the header — while the pill still bleeds past it. */
.rail--nav {
  display: flex; flex-direction: column; gap: 2px;
  --rail-inset: 14px; margin-left: calc(var(--rail-inset) * -1);
}
.rail-label {
  font-family: var(--font-sans); font-size: 11px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--text-light); opacity: .8;
  padding: 0 var(--rail-inset, 14px) 10px;
}
/* These rails' own rows start flush, so their labels do too */
.filter-panel .rail-label,
.rail--alpha .rail-label { padding-left: 0; }

/* ── A–Z index (Spiritual Guides) ─────────────────────────────
   A compact grid, not a 26-row column: every letter stays visible
   without scrolling, and the same block reflows to a wider grid on
   a phone instead of needing a separate control. */
.rail--alpha { display: flex; flex-direction: column; gap: 10px; }
.alpha-all {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  /* Pulled out by its own padding so the label sits on the page's
     left edge while the active pill bleeds past it */
  margin-left: -14px; width: calc(100% + 14px);
  padding: 10px 14px; border-radius: 10px;
  background: none; border: none; cursor: pointer; text-align: left;
  font-family: var(--font-sans); font-size: 14px; font-weight: 500;
  color: var(--text-mid); transition: background .2s ease, color .2s ease;
}
.alpha-all:hover { background: #FFFFFF7A; color: var(--deep-earth); }
.alpha-all.on {
  background: #FFFFFFF2; color: var(--honey-text, var(--honey)); font-weight: 600;
  box-shadow: 0 1px 5px #5B3E1F14;
}
.alpha-count {
  font-size: 12px; font-weight: 600; color: var(--text-light);
  background: #E8C06022; border-radius: 50px; padding: 2px 8px;
}
.alpha-all.on .alpha-count { background: #FFFFFF80; color: var(--honey-text, var(--honey)); }
.alpha-grid {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px;
}
.alpha-btn {
  aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center;
  background: white; border: 1px solid #E8C06035; border-radius: 9px;
  font-family: var(--font-sans); font-size: 13px; font-weight: 600;
  color: var(--text-mid); cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.alpha-btn:hover:not(:disabled) { border-color: var(--honey); color: var(--deep-earth); }
.alpha-btn.on { background: var(--honey); border-color: var(--honey); color: white; }
/* A letter with nobody under it stays in place, greyed — the index
   keeps one stable shape instead of reshuffling as you search */
.alpha-btn:disabled {
  background: transparent; border-color: #8B623018;
  color: var(--text-light); opacity: .4; cursor: default;
}
/* Reset beside the result count */
.result-reset {
  background: none; border: none; cursor: pointer; padding: 0 0 0 10px;
  font-family: var(--font-sans); font-size: 13px; color: var(--honey-text, var(--honey));
  text-decoration: underline; text-underline-offset: 2px;
}
.rail-item {
  display: flex; align-items: center; gap: 12px; width: 100%;
  background: none; border: none; cursor: pointer; text-align: left;
  font-family: var(--font-sans); font-size: 14px; font-weight: 500;
  letter-spacing: .02em; color: var(--text-mid);
  padding: 11px 14px; border-radius: 10px;
  transition: background .2s ease, color .2s ease;
}
.rail-item:hover { background: #FFFFFF7A; color: var(--deep-earth); }
/* On the wax panel the selected row reads as a lit cell of fresh
   comb — white lifts off the tint far better than more honey would */
.rail-item.on {
  background: #FFFFFFF2; color: var(--honey-text, var(--honey)); font-weight: 600;
  box-shadow: 0 1px 5px #5B3E1F14;
}
.rail-ic { display: inline-flex; width: 18px; justify-content: center; opacity: .8; }
.rail-item.on .rail-ic { opacity: 1; }
.rail-content { grid-area: content; min-width: 0; position: relative; z-index: 1; }

/* ── Plain page title ─────────────────────────────────────────
   Every inner page opens with this instead of the full-width
   earth-gradient band it replaced: just a serif title and its
   subtitle. The band cost most of the first screen before a visitor
   reached anything they came for. Left-aligned beside a rail
   (Events, Resources); centred on the pages that have none, whose
   bodies are centred compositions. In the rail grid it needs no
   grid-area: the rail and the content claim their cells by name, so
   the title auto-places into the one that is left. */
.page-head-wrap { padding: clamp(28px, 2.6vw, 52px) 0 0; }
.page-head-title {
  font-family: var(--font-serif); font-weight: 400;
  font-size: clamp(27px, 2.6vw, 48px); line-height: 1.12;
  color: var(--deep-earth); text-align: left; margin: 0 0 clamp(6px, 0.6vw, 12px);
}
.page-head-sub {
  font-size: clamp(15px, 0.18vw + 14.4px, 18px); color: var(--text-light); line-height: 1.7;
  text-align: left; margin: 0; max-width: 72ch;
}
.page-head--center { text-align: center; }
.page-head--center .page-head-title { text-align: center; }
.page-head--center .page-head-sub { text-align: center; margin-left: auto; margin-right: auto; }
.page-head-sub--wide { max-width: none; }
.page-head-action { margin-top: clamp(16px, 1.6vw, 28px); }
/* An event's own name runs longer than a page title, so it starts a
   step smaller and the chips above it carry the colour */
.page-head-title--event { font-size: clamp(25px, 2.3vw, 42px); }

/* Inside a rail column the content reads as one left-aligned
   column, so the shared centred section headings align left too */
.rail-content .section-head { text-align: left; margin-bottom: clamp(22px, 2.4vw, 44px); }
.rail-content .section-head .overline,
.rail-content .res-subheading { text-align: left; }
/* The shared rule caps this at 68ch and centres it for full-width
   sections; beside a rail the column is already the measure, so the
   paragraph spans its parent instead of stopping short of it. */
.rail-content .section-head .prose {
  text-align: left; margin-left: 0; margin-right: 0; max-width: none;
}

@media (max-width: 999.98px) {
  .rail-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "head" "rail" "content";
    row-gap: 20px; padding-top: 28px;
  }
  .rail-layout--flush { grid-template-areas: "rail" "content"; }
  /* Stacked, there is no left column for the wax to line — a band
     across the top would read as decoration, so it steps aside */
  .rail-layout::before, .rail-layout::after { display: none; }
  .rail { position: static; }
  .rail--nav {
    flex-direction: row; overflow-x: auto;
    gap: 8px; padding: 2px; margin-left: 0;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .rail--nav::-webkit-scrollbar { display: none; }
  .rail--nav .rail-label { display: none; }
  .rail--nav .rail-item {
    flex: 0 0 auto; width: auto;
    background: white; border: 1px solid #E8C06035;
    border-radius: 50px; padding: 9px 16px;
  }
  .rail--nav .rail-item.on { border-color: var(--honey); }
  /* Stacked, the A–Z index spreads into as many columns as fit, so
     it stays two or three shallow rows instead of a tall block */
  .rail--alpha { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px; }
  .rail--alpha .rail-label { width: 100%; padding-bottom: 0; }
  .alpha-all {
    width: auto; margin-left: 0; flex: 0 0 auto;
    border: 1px solid #E8C06035; background: white; border-radius: 50px;
    padding: 9px 16px;
  }
  .alpha-all.on { border-color: var(--honey); }
  .alpha-grid {
    flex: 1 1 240px;
    grid-template-columns: repeat(auto-fill, minmax(30px, 1fr));
    gap: 5px;
  }
  /* Squares would stack four rows deep on a phone and push the
     guides off-screen; shorter cells keep it to about three */
  .alpha-btn { aspect-ratio: auto; height: 38px; font-size: 12.5px; }
}
@media (max-width: 767.98px) {
  /* Keep the title compact on a phone so the content still starts
     within the first screen */
  .rail-layout { padding-top: 22px; row-gap: 16px; }
  .page-head-sub { font-size: 15px; line-height: 1.6; }
}
.res-subheading { font-family: var(--font-serif); font-size: clamp(20px, 2vw, 36px); font-weight: 400; color: var(--deep-earth); margin-bottom: 10px; text-align: center; }
.res-empty { color: var(--text-light); font-style: normal; text-align: center; }
.res-cta { margin-top: clamp(44px, 4.4vw, 84px); padding: clamp(32px, 3.2vw, 60px); text-align: center; background: linear-gradient(135deg, var(--deep-earth), var(--mid-bg)); border-radius: 20px; position: relative; overflow: hidden; }
.res-cta-quote { font-family: var(--font-serif); font-size: clamp(17px, 1.5vw, 26px); font-style: normal; color: var(--cream); line-height: 1.75; max-width: min(100%, clamp(560px, 42vw, 760px)); margin: 0 auto 16px; }
.res-cta-ref { font-size: 12px; color: var(--saffron); letter-spacing: .14em; margin-bottom: 28px; }

/* Sacred text cards */
.text-card { container-type: inline-size; background: var(--petal); border-radius: 14px; padding: clamp(20px, 1.8vw, 34px) clamp(22px, 1.9vw, 36px); border: 1px solid #E8C06030; border-left: 3px solid var(--honey); display: flex; flex-direction: column; text-align: left; }
.text-card--sage { background: white; border-left-color: var(--sage); }
.text-title { font-family: var(--font-serif); font-size: 19px; font-weight: 600; color: var(--deep-earth); margin-bottom: 4px; }
.text-author { font-size: 13px; color: var(--honey); margin-bottom: 10px; font-weight: 600; font-family: var(--font-sans); }
.text-card--sage .text-author { color: var(--sage); }
.text-desc { font-size: 14px; color: var(--text-mid); line-height: 1.65; margin-bottom: 18px; flex: 1; font-family: var(--font-sans); }
.text-card .pill-link { --c: var(--honey); }
.text-card--sage .pill-link { --c: var(--sage); }
.text-title { font-size: clamp(19px, 5cqi, 23px); }
.text-desc  { font-size: clamp(14px, 3.8cqi, 16px); }

/* ── Guide directory ──────────────────────────────────────────
   The list is a container, so the rows restyle themselves from the
   list's own width: the same directory is a compact stack on a phone
   and an open, generously spaced index on a large display, with the
   avatar, the row padding and the expanded bio's indent all moving
   together (--guide-av is the single number they share). */
.guide-list { container-type: inline-size; border: 1px solid #E8C06025; border-radius: 16px; overflow: hidden; --guide-av: 52px; --guide-pad: 24px; }
.guide-item { border-bottom: 1px solid #E8C06020; transition: background .2s; background: transparent; text-align: left; }
.guide-item.is-open { background: var(--petal); }
.guide-row { padding: 22px var(--guide-pad); cursor: pointer; display: flex; align-items: center; gap: clamp(14px, 1.4vw, 26px); }
.guide-item:not(.is-open) .guide-row:hover { background: #FAF3EC80; }
.guide-photo { width: var(--guide-av); height: var(--guide-av); border-radius: 50%; flex-shrink: 0; object-fit: cover; border: 2px solid #D4A14150; }
.guide-avatar {
  width: var(--guide-av); height: var(--guide-av); border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, #D4A14180, #E8C06060);
  align-items: center; justify-content: center;
  font-size: calc(var(--guide-av) * .38); color: var(--deep-earth); font-family: var(--font-sans); font-weight: 700;
  border: 2px solid #D4A14130;
}
.guide-id { flex: 1; min-width: 0; }
.guide-name { font-family: var(--font-serif); font-size: 19px; font-weight: 600; color: var(--deep-earth); margin-bottom: 2px; }
.guide-role { font-size: 13px; color: var(--honey); margin-bottom: 2px; }
.guide-country { font-size: 12px; color: var(--text-light); }
.guide-side { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.guide-chevron { font-size: 18px; color: var(--text-light); transition: transform .25s; transform: rotate(0deg); }
.guide-item.is-open .guide-chevron { transform: rotate(180deg); }
/* The open panel hangs off the same line as the name, whatever size
   the avatar has taken */
.guide-panel { padding: 0 var(--guide-pad) 28px calc(var(--guide-pad) + var(--guide-av) + clamp(14px, 1.4vw, 26px)); animation: fadeUp .3s ease; }
.guide-bio { font-size: 15px; color: var(--text-mid); line-height: 1.7; margin-bottom: 20px; font-family: var(--font-sans); max-width: 78ch; }

/* Everything the row is built from is a share of the LIST's width
   (cqi), so the directory opens up smoothly from a 335px phone
   column to a 1280px desktop column instead of snapping at two
   breakpoints. Declared on .guide-item rather than .guide-list: an
   element is never its own query container, so setting them on the
   list itself would silently do nothing. */
/* Guarded: a custom property holding an unknown unit is only caught
   when it is substituted, and it then falls back to the property's
   INITIAL value (width: auto), not to the default on .guide-list.
   The font sizes below need no guard — they fall back to the plain
   rules above them. */
@supports (container-type: inline-size) {
  .guide-item {
    --guide-av:  clamp(52px, 5.3cqi, 68px);
    --guide-pad: clamp(24px, 3cqi, 38px);
  }
}
.guide-row     { padding-block: clamp(22px, 2.4cqi, 30px); }
.guide-name    { font-size: clamp(19px, calc(15px + 0.65cqi), 23px); }
.guide-role    { font-size: clamp(13px, calc(11.5px + 0.2cqi), 14px); }
.guide-country { font-size: clamp(12px, calc(11px + 0.16cqi), 13px); }
.guide-bio     { font-size: clamp(15px, calc(13.8px + 0.17cqi), 16px); }
.chip-row { display: flex; gap: 8px; flex-wrap: wrap; }
.chip-row--links { gap: 10px; align-items: center; }
.chip-link { display: inline-flex; align-items: center; gap: 6px; padding: 7px 16px; border-radius: 50px; border: 1px solid #E8C06045; color: var(--text-mid); text-decoration: none; font-size: 14px; font-family: var(--font-sans); transition: all .2s; }
.chip-link:hover { border-color: var(--honey); color: var(--honey); }

.guides-invite { margin-top: clamp(44px, 4.4vw, 84px); padding: clamp(28px, 3vw, 56px); text-align: center; }
.invite-title { font-family: var(--font-serif); font-size: 22px; color: var(--deep-earth); font-style: normal; margin-bottom: 8px; }
.invite-sub { font-size: 15px; color: var(--text-light); margin-bottom: 24px; font-style: normal; }

/* Search field (guides page) */
.search-wrap { margin-bottom: clamp(22px, 2.4vw, 44px); position: relative; }
.search-icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); opacity: .6; pointer-events: none; display: flex; align-items: center; }
.search-clear { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; font-size: 18px; color: var(--text-light); line-height: 1; }
.result-note { font-size: 14px; color: var(--text-light); font-style: normal; margin-bottom: 20px; }
.guide-empty { text-align: center; padding: 48px 20px; color: var(--text-light); font-family: var(--font-serif); font-size: 16px; }
.guide-empty--plain { padding: 40px; font-family: var(--font-sans); font-size: inherit; font-style: normal; }

/* Map / events page — every filter lives in the shared left rail
   (see "Rail layout"), map + results in the column beside it. The
   panel itself is plain: the rail is the container, so a card
   inside it would only add a second border. */
.filter-panel { text-align: left; display: flex; flex-direction: column; gap: clamp(18px, 1.7vw, 30px); align-items: flex-start; }
.filter-group { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.filter-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-toggle { display: none; }
.map-panel { background: linear-gradient(180deg, var(--petal) 0%, var(--warm-white) 100%); border: 1px solid #E8C06025; border-radius: 16px; padding: 8px 8px 14px; margin-bottom: var(--gap-lg); }

/* Guide filter: searchable combobox listing guides that currently
   have published events */
.combo { position: relative; width: 100%; }
.combo .combo-input { padding: 10px 36px 10px 14px; font-size: 14px; border-radius: 10px; background: #FFFFFF; }
.combo-clear { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; font-size: 16px; color: var(--text-light); line-height: 1; padding: 2px; }
.combo-list { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: white; border: 1px solid #E8C06040; border-radius: 12px; box-shadow: 0 10px 30px rgba(91, 62, 31, 0.14); max-height: 220px; overflow-y: auto; z-index: 20; padding: 6px; }
.combo-option { display: block; width: 100%; text-align: left; background: none; border: none; cursor: pointer; padding: 9px 12px; border-radius: 8px; font-family: var(--font-sans); font-size: 14px; color: var(--text-mid); }
.combo-option:hover { background: var(--petal); }
.combo-option.on { color: var(--honey); font-weight: 600; }
/* Context after the guide's name: role (when they have a profile) and
   how many gatherings they are leading */
.combo-meta { color: var(--text-light); font-size: 13px; font-weight: 400; }
.combo-option.on .combo-meta { color: var(--honey); }
.combo-empty { padding: 9px 12px; font-size: 13px; color: var(--text-light); font-style: normal; }

.map-hint { font-size: 12px; color: var(--text-light); letter-spacing: .14em; font-family: var(--font-sans); text-align: center; margin-top: 10px; }
/* Invitation under the upcoming-events trio on the home page */
.browse-invite-text { font-family: var(--font-serif); font-style: normal; font-size: 17px; color: var(--text-mid); margin-bottom: 18px; }
/* Collapse/expand control for the globe panel */
.globe-toggle {
  display: block; margin: 2px 6px 0 auto;
  background: none; border: 1px solid #D4A14150; border-radius: 50px;
  padding: 6px 15px; cursor: pointer;
  font-family: var(--font-sans); font-size: 11px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--text-light);
  transition: all .2s;
}
.globe-toggle:hover { color: var(--honey); border-color: var(--honey); }
.map-panel--collapsed { padding: 10px; }
.map-panel--collapsed .globe-toggle { margin: 0 auto; }
.map-globe { position: relative; width: 100%; margin: 0 auto; }
.map-globe-img { width: 100%; height: auto; mix-blend-mode: multiply; opacity: 0.92; display: block; user-select: none; pointer-events: none; }

/* Interactive 3D globe: same footprint as the static artwork, square
   so the WebGL canvas always matches its container */
.map-globe--3d { aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; overflow: hidden; cursor: grab; }
/* The live globe fades in over the artwork instead of snapping */
.map-globe--3d .scene-container { animation: globeIn .7s ease both; }
@keyframes globeIn { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .map-globe--3d .scene-container { animation: none; } }
.map-globe--3d:active { cursor: grabbing; }
/* The brand bee flies the cursor over the globe. Mouse/trackpad only
   (touch devices have no cursor); hotspot at the bee's centre so
   dragging and clicking stay accurate. The image-set overrides give
   retina screens the sharp 2x bitmap where supported. */
@media (hover: hover) and (pointer: fine) {
  .map-globe--3d, .map-globe--3d:active, .map-globe--3d *, .map-globe--3d .globe-lotus { cursor: url(img/bee-cursor.png) 16 16, grab; }
  .map-globe--3d, .map-globe--3d:active, .map-globe--3d *, .map-globe--3d .globe-lotus { cursor: -webkit-image-set(url(img/bee-cursor.png) 1x, url(img/bee-cursor@2x.png) 2x) 16 16, grab; }
  .map-globe--3d, .map-globe--3d:active, .map-globe--3d *, .map-globe--3d .globe-lotus { cursor: image-set(url(img/bee-cursor.png) 1x, url(img/bee-cursor@2x.png) 2x) 16 16, grab; }
}
.map-globe--3d canvas { display: block; }
/* Lotus gathering markers on the 3D globe: small ivory lotus with a
   honey glow, centred on its location by the globe's HTML layer */
/* No cursor of its own: the marker inherits the globe's bee cursor
   so the pointer never flips back to a hand inside the globe area.
   The symmetric padding grows the tap target (a finger-friendly
   ~36px) without moving the lotus off its location. */
.globe-lotus { position: relative; transition: opacity .3s; line-height: 0; padding: 9px; margin: -9px; }
.globe-lotus svg { display: block; filter: drop-shadow(0 0 4px rgba(226, 193, 90, 0.85)) drop-shadow(0 0 10px rgba(240, 166, 178, 0.5)); transition: transform .25s cubic-bezier(.16, 1, .3, 1); }
.globe-lotus:hover svg { transform: scale(1.4); }
/* Hover tooltip over a gathering's lotus */
.globe-tip { position: absolute; bottom: calc(100% + 9px); left: 50%; transform: translateX(-50%); opacity: 0; pointer-events: none; transition: opacity .2s; white-space: nowrap; z-index: 5; display: flex; flex-direction: column; gap: 2px; background: rgba(45, 33, 18, 0.92); border-radius: 10px; padding: 8px 12px; font-family: var(--font-sans); box-shadow: 0 6px 20px rgba(45, 33, 18, 0.35); line-height: 1.35; }
.globe-lotus:hover .globe-tip { opacity: 1; }
.globe-tip strong { color: var(--honey); font-size: 13px; font-weight: 600; }
.globe-tip span { color: rgba(255, 255, 255, 0.85); font-size: 11.5px; }

/* Visually hidden, read by screen readers */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.region-btn {
  position: absolute;
  transform: translate(-50%, -50%);
  background: white;
  border: 2px solid #D4A14180;
  border-radius: 50px;
  padding: 5px 7px 5px 13px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 12px;
  color: var(--deep-earth);
  cursor: pointer;
  box-shadow: 0 3px 14px rgba(91, 62, 31, 0.28);
  transition: all .3s cubic-bezier(.16, 1, .3, 1);
  white-space: nowrap;
  line-height: 1.2;
  display: flex; align-items: center; gap: 7px;
  z-index: 4;
}
.region-btn.on { transform: translate(-50%, -50%) scale(1.06); background: var(--honey); border-color: var(--honey); color: white; z-index: 6; }
/* Globe pins carry the same count badge as the filter panel's region
   pills, one size down so each pin still sits over its own landmass. */
.region-btn .region-count { min-width: 16px; height: 16px; font-size: 10px; padding: 0 4px; }
.region-count {
  font-family: var(--font-mono);
  background: var(--cream); color: var(--text-light);
  border-radius: 50px;
  min-width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 5px;
  font-size: 11px; font-weight: 500;
  border: 1px solid #D4A14140;
}
.region-count.has { background: var(--honey); color: white; border: none; }
.region-btn.on .region-count { background: rgba(255, 255, 255, 0.35); color: white; border: none; }

.type-label { font-size: 11px; color: var(--text-light); letter-spacing: .12em; font-family: var(--font-sans); margin-right: 4px; flex-shrink: 0; }
.type-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 16px; border-radius: 50px; cursor: pointer; font-size: 12px; font-family: var(--font-sans); font-weight: 500; transition: all .2s; border: none; background: #FFFFFF; color: var(--text-mid); box-shadow: inset 0 0 0 1.5px #D4A14135; }
.type-pill.on { background: var(--c, var(--honey)); color: white; box-shadow: 0 2px 10px color-mix(in srgb, var(--c, var(--honey)) 31%, transparent); }
.type-pill.on .region-count { background: rgba(255, 255, 255, 0.35); color: white; border: none; }
.type-pill.on .type-dot { background: white; }

/* Colour swatch dot shown in filter pills and the map legend */
.type-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--honey)); flex-shrink: 0; }

/* Online events: pink indicator in the card's location slot */
.card-loc.is-online { color: var(--type-online); font-weight: 600; }

.result-count { font-size: 13px; color: var(--text-light); font-family: var(--font-sans); margin-bottom: 20px; }
.map-empty { text-align: center; padding: 60px 0; color: var(--text-light); font-style: normal; font-family: var(--font-serif); }

.map-card { container-type: inline-size; background: white; border: 1.5px solid #D4A14122; border-radius: 16px; padding: clamp(18px, 1.5vw, 30px) clamp(20px, 1.6vw, 32px); cursor: pointer; transition: all .3s; position: relative; overflow: hidden; box-shadow: none; display: flex; flex-direction: column; text-align: left; }
.map-card:hover { transform: translateY(-3px); box-shadow: 0 8px 28px #D4A14122; }
.map-card .card-top { margin-bottom: 12px; gap: 8px; }
.map-card .card-tags { gap: 6px; }
.map-card .card-loc { font-size: 11px; flex-shrink: 0; font-family: var(--font-sans); font-style: inherit; }
.map-card .card-title { font-size: 18px; margin-bottom: 6px; line-height: 1.25; }
.map-card .card-date { font-family: var(--font-sans); margin-bottom: 8px; }
.map-card .card-desc { font-size: 13px; line-height: 1.6; font-family: var(--font-sans); margin-bottom: 0; }

/* ── Inside an event card ─────────────────────────────────────
   The type is measured in cqi — percent of THE CARD's own width, not
   the window's. So a card sets its own scale continuously wherever
   it lands: full width on a phone, one of four in a wide events
   grid, one of three beside the homepage calendar. The clamps hold
   it between the sizes the cards use today and a comfortable
   ceiling, so nothing shrinks anywhere it used to be bigger.
   Placed after .map-card's rules above so the two-class selectors
   match on specificity and win on source order. */
.ec .card-title              { font-size: clamp(20px, 5.2cqi, 25px); }
.ec .card-desc               { font-size: clamp(14px, 3.8cqi, 16px); }
.map-card .card-title        { font-size: clamp(18px, 4.9cqi, 22px); }
.map-card .card-desc         { font-size: clamp(13px, 3.5cqi, 15.5px); }
/* One more line of the description once the card is wide enough to
   make a three- or four-line block read as a paragraph */
@container (min-width: 420px) {
  .ec .clamp-2, .map-card .clamp-2 { -webkit-line-clamp: 3; }
  .ec .clamp-resp, .map-card .clamp-resp { -webkit-line-clamp: 4; }
}

/* Map dots (SVG world map markers) */
.map-dot { cursor: pointer; }
.map-dot-c { transition: all .3s; }

/* Event hub */
/* Key-facts card: the essentials, large and scannable */
/* Six facts, so three per row divides evenly — auto-fit would fit
   five across the wider edge-aligned page and orphan the sixth */
.event-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 1.8vw, 34px) clamp(22px, 2.4vw, 48px);
}
@media (max-width: 899.98px) { .event-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599.98px) { .event-facts { grid-template-columns: 1fr; } }
.event-fact { display: flex; align-items: flex-start; gap: 14px; min-width: 0; }
.event-fact-icon {
  flex-shrink: 0;
  width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: #E8C0601A; border: 1px solid #E8C06035;
}
.event-fact-label {
  font-family: var(--font-sans); font-size: 11px; font-weight: 600;
  letter-spacing: .14em; color: var(--text-light); margin-bottom: 4px;
}
.event-fact-value {
  font-family: var(--font-sans); font-size: 17px; font-weight: 600;
  color: var(--deep-earth); line-height: 1.4; overflow-wrap: break-word;
}
/* ── The event page ───────────────────────────────────────────
   Stacked while the page is narrow. Once there is room for two
   columns the key facts take the reading column and the actions
   become a sidebar beside them — otherwise a wide display gets six
   facts spread across 480px cells and Register buttons 500px wide,
   which is the same content with the empty space merely spread out. */
.event-body {
  padding: clamp(32px, 3.4vw, 64px) 0 clamp(56px, 6vw, 110px);
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: var(--gap-md); align-items: start;
}
@media (min-width: 1200px) {
  /* The sidebar is a booking column, not a proportion of the page:
     it stops at 400px so the buttons in it stay button-shaped, and
     everything else goes to the facts. */
  .event-body { grid-template-columns: minmax(0, 1fr) clamp(300px, 24vw, 400px); }
}
.panel { background: white; border: 1px solid #E8C06030; border-radius: 18px; padding: clamp(20px, 1.9vw, 36px) clamp(18px, 1.8vw, 34px); }
.stat-box { background: var(--petal); border-radius: 12px; padding: 12px 14px; border: 1px solid #E8C06028; font-size: 13px; color: var(--text-mid); }
.panel-note { font-size: 13px; color: var(--text-light); line-height: 1.7; margin-top: 16px; }

/* What-is-seva items (Support page) */
.support-item { background: white; border-radius: 14px; padding: 20px; text-align: center; border: 1px solid #E8C06025; }
.support-icon { font-size: 28px; margin-bottom: 8px; }
.support-label { font-size: 15px; color: var(--text-mid); font-family: var(--font-sans); font-weight: 600; }
.support-note { text-align: center; font-size: 14px; color: var(--text-light); margin-top: 20px; font-style: normal; }
.trust-quote { background: var(--petal); border-radius: 16px; padding: clamp(20px, 2vw, 36px) clamp(24px, 2.4vw, 44px); border: 1px solid #E8C06030; font-family: var(--font-serif); font-style: normal; font-size: clamp(17px, 0.2vw + 16.3px, 21px); color: var(--deep-earth); line-height: 1.6; max-width: min(100%, clamp(760px, 54vw, 960px)); margin: 0 auto; text-align: center; }

/* About page */
.about-title { font-family: var(--font-serif); font-size: clamp(32px, 5vw, 58px); font-weight: 300; color: var(--cream); font-style: normal; margin-bottom: 16px; }
.about-sub { font-size: clamp(16px, 2vw, 20px); color: #F5EFE688; line-height: 1.8; }
/* The statement and the invitation under it belong to the opening
   composition, so they sit close to the subtitle above rather than a
   fixed 32px clear of it at every size */
/* Type curve is the original one — only the ceiling is lifted a
   little so the statement keeps growing past a laptop instead of
   freezing at 30px. Below ~1130px the sizes are unchanged. */
.about-lede { font-family: var(--font-serif); font-size: clamp(20px, 3vw, 34px); font-weight: 400; color: var(--deep-earth); line-height: 1.6; margin: clamp(12px, 0.7vw + 6px, 22px) auto 0; max-width: min(100%, 760px); }
.about-lede--honey { font-size: clamp(16px, 2.2vw, 24px); color: var(--honey); margin: clamp(10px, 0.55vw + 5px, 18px) auto 0; max-width: min(100%, 640px); }
.about-block { margin-bottom: 52px; }
.stack-20 { display: flex; flex-direction: column; gap: 20px; }

/* Newsletter */
.news-title { font-family: var(--font-serif); font-size: clamp(20px, 3vw, 28px); font-weight: 400; color: var(--deep-earth); margin: 14px 0 10px; }
.news-desc { font-size: 14px; color: var(--text-mid); line-height: 1.8; margin-bottom: 24px; font-family: var(--font-sans); }
.news-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.news-input { padding: 12px 20px; border-radius: 50px; border: 1.5px solid #D4A14150; background: white; font-size: 14px; font-family: var(--font-sans); color: var(--text-dark); outline: none; min-width: 240px; }

/* ── 9. Forms ─────────────────────────────────────────────────── */
.inp { width: 100%; padding: 12px 16px; border: 1.5px solid #E8C06040; border-radius: 12px; font-family: var(--font-sans); font-size: 16px; color: var(--text-dark); background: var(--warm-white); outline: none; transition: border-color .2s; }
.inp:focus { border-color: var(--honey); }
.inp--search { padding-left: 44px; font-size: 15px; }
.inp--area { resize: vertical; }

/* Submit flow */
.submit-done { min-height: 100svh; background: var(--warm-white); display: flex; align-items: center; justify-content: center; padding: clamp(96px, 10vh, 160px) var(--page-edge); }
.submit-done-inner { text-align: center; max-width: min(100%, clamp(520px, 40vw, 700px)); }
.submit-globe { height: 90px; width: auto; mix-blend-mode: multiply; margin-bottom: 24px; }
.submit-title { font-family: var(--font-serif); font-size: clamp(26px, 4vw, 40px); font-weight: 400; color: var(--deep-earth); margin-bottom: 16px; line-height: 1.2; }
.submit-p { font-size: 16px; color: var(--text-mid); line-height: 1.85; margin-bottom: 12px; font-family: var(--font-sans); }
/* No nowrap: at 320px this sentence is wider than the screen */
.submit-small { font-size: 14px; color: var(--text-light); line-height: 1.8; margin-bottom: 32px; font-family: var(--font-sans); }

.form-wrap { width: min(100% - var(--page-edge) * 2, clamp(640px, 46vw, 820px)); margin: 0 auto; padding-block: clamp(36px, 3.6vw, 68px); }
.form-head { text-align: center; margin-bottom: clamp(26px, 2.6vw, 46px); }
.form-heading { font-family: var(--font-serif); font-size: clamp(26px, 2vw, 36px); color: var(--deep-earth); font-style: normal; margin-top: 18px; }

/* Stepper */
.stepper { display: flex; gap: 6px; justify-content: center; margin-bottom: 40px; }
.step { display: flex; align-items: center; gap: 6px; }
.step-col { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.step-dot { width: 32px; height: 32px; border-radius: 50%; background: #D4A1411A; display: flex; align-items: center; justify-content: center; color: var(--honey); font-size: 14px; font-weight: 600; transition: all .3s; }
.step-dot.done { background: var(--honey); color: white; }
.step-label { font-size: 10px; letter-spacing: .04em; white-space: nowrap; font-family: var(--font-sans); color: #87683C99; font-weight: 400; transition: all .3s; }
.step-label.on { color: var(--deep-earth); font-weight: 600; }
.step-line { width: clamp(10px, 3vw, 26px); height: 1px; margin-bottom: 15px; background: #D4A14128; }
.step-line.done { background: var(--honey); }
.step-note { text-align: center; font-size: 11px; letter-spacing: .2em; color: var(--honey); white-space: nowrap; font-family: var(--font-sans); margin: 0 0 18px; }

/* Form card */
.form-card { background: white; border-radius: 20px; padding: clamp(24px, 2.8vw, 52px); border: 1px solid #E8C06028; box-shadow: 0 8px 40px #D4A1410E; animation: fadeUp .4s ease; text-align: left; }
.form-title { font-family: var(--font-sans); font-size: 21px; font-weight: 600; color: var(--deep-earth); margin-bottom: 6px; }
.form-title--tight { margin-bottom: 12px; font-style: normal; }
.form-sub { font-size: 14px; color: var(--text-light); font-style: normal; margin-bottom: 28px; }
.field { margin-bottom: 22px; }
.field-label { display: block; font-size: 14px; color: var(--text-mid); margin-bottom: 7px; font-weight: 600; }
.fmt-row { display: flex; gap: 12px; }
.fmt-opt { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px; border-radius: 12px; cursor: pointer; border: 1.5px solid #E8C06038; font-size: 14px; color: var(--text-mid); }
.fmt-icon { font-size: 22px; }
.hidden { display: none; }

/* Final review step */
.form-lead { font-size: 15px; color: var(--text-mid); line-height: 1.75; margin-bottom: 28px; }
.tier-box { background: var(--petal); border-radius: 12px; padding: 18px; margin-bottom: 28px; border: 1px solid #E8C06028; text-align: left; }
.tier-box-head { text-align: left; margin-bottom: 24px; }
.tier-box-label { display: block; font-size: 14px; color: var(--text-mid); margin-bottom: 12px; font-weight: 600; font-family: var(--font-sans); }
.tier-opt { display: flex; align-items: center; gap: 12px; padding: 13px 16px; margin-bottom: 10px; border-radius: 12px; cursor: pointer; border: 1.5px solid #E8C06035; background: white; transition: all .2s; }
.tier-opt.on { border-color: var(--honey); background: #D4A14112; }
.tier-radio { width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; border: 2px solid #E8C06050; background: transparent; box-shadow: none; transition: all .2s; }
.tier-opt.on .tier-radio { border-color: var(--honey); background: var(--honey); box-shadow: inset 0 0 0 3px white; }
.tier-opt-label { font-size: 14px; color: var(--text-mid); font-weight: 400; font-family: var(--font-sans); }
.tier-opt.on .tier-opt-label { font-weight: 600; }
.tier-note { font-size: 13px; color: var(--text-light); line-height: 1.6; margin-top: 6px; font-family: var(--font-sans); }
.next-label { font-size: 12px; color: var(--text-light); letter-spacing: .12em; margin-bottom: 8px; white-space: nowrap; }
.next-item { font-size: 14px; color: var(--text-mid); margin-bottom: 8px; display: flex; align-items: flex-start; gap: 8px; }
.next-star { color: var(--honey); margin-top: 1px; }
.form-error { color: var(--error); font-size: 14px; margin-top: 20px; text-align: center; font-family: var(--font-sans); }
/* Quiet privacy reassurance under the submit button */
.form-privacy { font-size: 12.5px; color: var(--text-light); line-height: 1.6; text-align: center; margin-top: 22px; font-family: var(--font-sans); }
.form-nav { display: flex; justify-content: space-between; margin-top: 28px; gap: 12px; }

/* ── 10. Footer ───────────────────────────────────────────────── */
.footer { background: var(--dark-bg); padding: clamp(44px, 4.4vw, 84px) var(--page-pad-x) clamp(28px, 2.6vw, 44px); color: #F5EFE680; text-align: left; }
/* A grid, not space-between: at 1600px the flex version pushed the
   four columns to opposite ends of the footer with a lake of dark
   between them. The brand block takes a wider track than the link
   columns, and the whole set collapses to two, then one. */
.footer-grid {
  display: grid;
  grid-template-columns: minmax(240px, 1.4fr) repeat(3, minmax(150px, 1fr));
  gap: var(--gap-xl); margin-bottom: 0;
}
@media (max-width: 860px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .footer-grid { grid-template-columns: minmax(0, 1fr); } }
.footer-brand { max-width: 340px; }
.footer-brand-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.footer-tagline { font-size: 9px; letter-spacing: .22em; color: #F5EFE660; text-transform: uppercase; white-space: nowrap; font-family: var(--font-sans); }
.footer-desc { font-size: 14px; line-height: 1.8; margin-bottom: 12px; }
.footer-quote { font-size: 13px; font-style: normal; color: #E8C06075; white-space: nowrap; }
.footer-cta { background: transparent; border: 1px solid #D4A14145; color: var(--honey); padding: 8px 20px; border-radius: 50px; font-family: var(--font-sans); font-size: 13px; cursor: pointer; transition: all .3s; }
.footer-col-title { font-size: 11px; letter-spacing: .2em; color: var(--honey); margin-bottom: 16px; }
.footer-link { font-size: 14px; margin-bottom: 10px; cursor: pointer; transition: color .2s; }
.footer-link:hover { color: var(--cream); }
.footer-bottom { padding-top: 22px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-size: 13px; }
.footer-mantra { font-style: normal; color: #D4A14150; white-space: nowrap; }

/* ── 11. Utilities ────────────────────────────────────────────── */
.tac { text-align: center; }
.tal { text-align: left; }
.nowrap { white-space: nowrap; }
.mt-16 { margin-top: 16px; }
.mt-20 { margin-top: 20px; }
.mt-32 { margin-top: 32px; }
.mt-40 { margin-top: 40px; }
.mb-0  { margin-bottom: 0; }
.mb-14 { margin-bottom: 14px; }
.mb-16 { margin-bottom: 16px; }
.mb-20 { margin-bottom: 20px; }
.mb-22 { margin-bottom: 22px; }
.mb-24 { margin-bottom: 24px; }
.mb-28 { margin-bottom: 28px; }
.mb-32 { margin-bottom: 32px; }
.mb-36 { margin-bottom: 36px; }
.mb-40 { margin-bottom: 40px; }
.mb-52 { margin-bottom: 52px; }
.mb-56 { margin-bottom: 56px; }
.mb-64 { margin-bottom: 64px; }
.m-22-0-32 { margin: 22px 0 32px; }

/* ── 12. Responsive styles ────────────────────────────────────── */
/* Tablet: the rail stacks (see the .rail-layout media block), so the
   filters collapse behind their toggle button and the globe is capped
   to stay in proportion across the full page width */
@media (max-width: 999.98px) {
  .filter-toggle {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; padding: 12px 18px;
    border-radius: 12px; border: 1.5px solid #E8C06040; background: white;
    font-family: var(--font-sans); font-size: 14px; font-weight: 600;
    color: var(--deep-earth); cursor: pointer;
  }
  .filter-panel { display: none; }
  .filter-panel.is-open {
    display: flex; margin-top: 14px;
    background: white; border: 1px solid #E8C06030;
    border-radius: 14px; padding: 18px 16px;
  }
  .filter-panel .rail-label { display: none; }
}
@media (max-width: 899.98px) {
  .map-globe { max-width: 580px; }
}

/* Mobile */
@media (max-width: 767.98px) {
  .region-btn { padding: 3px 4px 3px 9px; font-size: 9px; gap: 5px; }
  .region-btn .region-count { min-width: 14px; height: 14px; font-size: 9px; padding: 0 3px; }
  /* On the phone-sized globe the pills span up to a quarter of its
     width, so two labels need their own safe anchor points (!important
     because base positions arrive as inline styles). N. America shifts
     right to stay off the bee; Oceania tucks in from the rim. */
  .region-btn.r-namerica { left: 37.5% !important; top: 28% !important; }
  /* Keeps the half-on, half-off straddle of the limb (see MAP_REGIONS),
     lifted a little further clear of the lotus below */
  .region-btn.r-australia { top: 49.5% !important; }
  .region-btn.r-africa { top: 59% !important; }
  /* The count badge widens both pills, and at this size Europe and Asia
     sit only a few percent apart — give them a little more air so they
     stay legible side by side. */
  .region-btn.r-europe { left: 64% !important; top: 20% !important; }
  .region-btn.r-asia   { left: 83% !important; top: 33% !important; }
  .clamp-resp { -webkit-line-clamp: 2; }
}

/* ── Sacred Food directory ──────────────────────────────────────
   Compact place cards, country/type filters, city chips, and the
   full-detail modal (a bottom sheet on mobile). */
.search-wrap--tight { margin-bottom: 12px; }
.food-controls { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.inp--select { width: auto; flex: 1 1 200px; max-width: 280px; font-size: 14px; padding: 11px 14px; cursor: pointer; color: var(--text-mid); }
.food-chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 2px 0 18px; }
.chip {
  padding: 7px 15px; border-radius: 50px; border: 1px solid #E8C06050;
  background: white; font-family: var(--font-sans); font-size: 13px;
  color: var(--text-mid); cursor: pointer; transition: all .2s; line-height: 1.3;
}
.chip:hover { border-color: var(--honey); color: var(--deep-earth); }
.chip.on { background: var(--honey); border-color: var(--honey); color: white; font-weight: 600; }
.chip--clear { border-style: dashed; color: var(--text-light); flex: 0 0 auto; }

.food-country { margin-bottom: 48px; }
.food-country-head {
  display: flex; align-items: baseline; gap: 10px; text-align: left;
  margin-bottom: 18px; padding-bottom: 10px; border-bottom: 1px solid #E8C06035;
}
.food-country-count { font-family: var(--font-sans); font-size: 13px; color: var(--text-light); }

.place-city { font-size: 13px; color: var(--text-light); margin-bottom: 8px; }
.place-type { font-size: 13px; margin-bottom: 10px; }
.place-short {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
button.pill-link { background: transparent; cursor: pointer; width: 100%; }

/* Place detail modal */
.place-modal-backdrop {
  position: fixed; inset: 0; z-index: 400; background: #231204A8;
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.place-modal {
  background: var(--warm-white); border-radius: 20px; width: 100%;
  max-width: min(100%, clamp(620px, 46vw, 820px)); max-height: min(88svh, 900px); overflow-y: auto;
  position: relative; text-align: left; box-shadow: 0 24px 80px #23120466;
  animation: placeModalIn .25s ease;
}
@keyframes placeModalIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.place-modal-close {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 38px; height: 38px; border-radius: 50%; border: none;
  background: #231204B8; color: var(--cream); font-size: 20px; line-height: 1;
  cursor: pointer; transition: background .2s;
}
.place-modal-close:hover { background: var(--deep-earth); }
.place-modal-body { padding: 24px 28px 30px; }
.place-modal-title { margin: 12px 0 4px; }
.place-sec { margin-top: 20px; }
.place-sec-title {
  font-family: var(--font-sans); font-size: 11px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--honey);
  margin-bottom: 6px;
}
.place-sec-text { font-size: 15px; color: var(--text-mid); line-height: 1.7; }
.place-links { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px; }
.place-links .pill-link { flex: 1 1 160px; }

@media (max-width: 767.98px) {
  .inp--select { max-width: none; flex: 1 1 40%; }
  /* The modal becomes a bottom sheet: full width, thumb-reachable close */
  .place-modal-backdrop { padding: 0; align-items: flex-end; }
  .place-modal { max-width: none; max-height: 92dvh; border-radius: 22px 22px 0 0; animation-name: placeSheetIn; }
  @keyframes placeSheetIn { from { transform: translateY(40px); opacity: .6; } to { transform: none; opacity: 1; } }
  .place-modal-body { padding: 20px 20px 30px; }
}

/* ── Bee cursor ─────────────────────────────────────────────────
   The bee mascot flies as the pointer everywhere. Hotspot sits on
   the bee's head (front-right of the artwork). The image-set rule
   upgrades to the sharper @2x on retina screens where supported. */
*, *::before, *::after {
  cursor: url("img/bee-cursor.png") 27 14, auto !important;
}
*, *::before, *::after {
  cursor: -webkit-image-set(url("img/bee-cursor.png") 1x, url("img/bee-cursor@2x.png") 2x) 27 14, auto !important;
}

/* ── Launch-audit fixes ─────────────────────────────────────────
   Contrast: gold is kept for borders and accents, but text set in
   gold moves to a darker shade (--honey-text) that passes WCAG AA
   on cream/white; gold-gradient buttons carry dark brown text. */
:root { --honey-text: #8A6516; }
.overline { color: var(--honey-text); }
.seva--dark .overline { color: var(--saffron); }
.card-date { color: var(--honey-text); }
.bg-g, .nav-cta, .seva-cta, .mobile-menu-cta, .searchbar-btn { color: #3A200A; }
.chip.on { color: #3A200A; }

/* Footer links are real anchors now */
a.footer-link { display: block; color: inherit; text-decoration: none; }
a.footer-cta { display: inline-block; color: var(--honey); text-decoration: none; }

/* Newsletter form states */
.news-input.is-invalid { border-color: #B3261E; }
.news-msg { flex-basis: 100%; font-size: 13px; color: #B3261E; margin: 4px 0 0; }
.news-confirm { font-size: 15px; color: var(--deep-earth); background: var(--petal); border: 1px solid #E8C06040; border-radius: 12px; padding: 14px 22px; display: inline-block; }

/* Category tag pills hug their text on every resource card */
.res-card-body > .tag { align-self: flex-start; }

/* Clear-all inside the events filter panel */
.filter-clear-all { margin-top: 4px; align-self: flex-start; }

/* Comfortable touch targets */
.nav-burger { padding: 12px 10px; }
.footer-cta { padding: 11px 22px; }

/* ── Journey levels ──────────────────────────────────────────────
   Three stages of the path, each with a subtle colour identity that
   carries from the homepage cards to the event-card badges and the
   filter pills: beginning = fresh honey gold, deepening = warm
   terracotta, developing = deep earth. */
:root {
  --lvl-beginning:  #C99A2E;   /* fresh honey gold */
  --lvl-deepening:  #A66A44;   /* warm terracotta */
  --lvl-developing: #6E4F23;   /* deep earth */
}
.lvl-beginning  { --c: var(--lvl-beginning); }
.lvl-deepening  { --c: var(--lvl-deepening); }
.lvl-developing { --c: var(--lvl-developing); }

/* Small level badge on event cards; understated, colour-coded */
.lvl-badge {
  display: inline-flex; align-items: center;
  padding: 2.5px 9px; border-radius: 20px;
  font-size: 10px; font-weight: 700; letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--c); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent);
  background: color-mix(in srgb, var(--c) 9%, white);
  white-space: nowrap;
}

/* Homepage journey block: the primary way into the events list,
   living inside the hero right after the globe and proof line */
.hero-journey { width: 100%; max-width: min(100%, clamp(960px, 68vw, 1280px)); margin-top: clamp(24px, 3vh, 46px); text-align: center; }
.hero-journey .overline { margin-bottom: 8px; }
.hero-journey-title { margin-bottom: clamp(14px, 1.6vw, 26px); }
.journey-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-md);
}
.journey-card {
  container-type: inline-size;
  position: relative; overflow: hidden; cursor: pointer;
  background: white; border: 1px solid #E8C06033; border-radius: 16px;
  padding: clamp(22px, 2vw, 38px) clamp(20px, 1.8vw, 34px) clamp(18px, 1.7vw, 32px);
  display: flex; flex-direction: column;
  gap: 8px; text-align: left;
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.journey-card:hover, .journey-card:focus-visible {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--c) 55%, transparent);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--c) 18%, transparent);
  outline: none;
}
.journey-accent {
  position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--c), color-mix(in srgb, var(--c) 45%, #E8B84B));
}
.journey-title { font-family: var(--font-serif); font-size: 24px; color: var(--c); }
.journey-tagline { font-size: 14.5px; color: #5B3E1F; line-height: 1.5; flex: 1; }
.journey-cta { font-size: 13px; font-weight: 700; color: var(--c); letter-spacing: .3px; }
/* A door with more width says where it leads a little more loudly.
   The compact hero band keeps its own smaller sizes below — those
   selectors are two classes deep, so they still win. */
.journey-title   { font-size: clamp(23px, 6.4cqi, 28px); }
.journey-tagline { font-size: clamp(14.5px, 4.2cqi, 16.5px); }
/* Compact band variant (hero): accent runs down the left edge, the
   label and tagline sit in one short stack, and the CTA shrinks to
   an arrow — the three levels keep their prominence without pushing
   the rest of the homepage down. */
.journey-grid--row { gap: 14px; }
.journey-card--row {
  flex-direction: row; align-items: center; gap: 12px;
  padding: 14px 16px 14px 20px;
}
.journey-card--row .journey-accent {
  top: 0; bottom: 0; right: auto; width: 4px; height: auto;
  background: linear-gradient(180deg, var(--c), color-mix(in srgb, var(--c) 45%, #E8B84B));
}
.journey-row-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.journey-card--row .journey-title { font-size: 19px; line-height: 1.2; }
.journey-card--row .journey-tagline { font-size: 13px; line-height: 1.4; flex: none; }
.journey-card--row .journey-cta { margin-left: auto; font-size: 18px; line-height: 1; }
/* Three level cards across need roughly 270px each to stay legible;
   below that they stack rather than squeeze (was 760px, where each
   card had fallen to about 226px) */
@media (max-width: 860px) {
  .journey-grid { grid-template-columns: minmax(0, 1fr); gap: 13px; }
  .journey-card { padding: 20px 18px 17px; }
  .journey-card--row { padding: 13px 14px 13px 18px; }
}

/* Journey-level chips on the submission form (1–2 selections) */
.lvl-opts { display: flex; flex-direction: column; gap: 9px; margin-top: 6px; }
.lvl-opt {
  display: flex; align-items: flex-start; gap: 11px; cursor: pointer;
  border: 1.5px solid #E8C06044; border-radius: 12px; padding: 11px 14px;
  transition: border-color .2s, background .2s;
}
.lvl-opt:hover { border-color: color-mix(in srgb, var(--c) 50%, transparent); }
.lvl-opt.on {
  border-color: var(--c);
  background: color-mix(in srgb, var(--c) 7%, white);
}
.lvl-opt-check {
  flex-shrink: 0; width: 17px; height: 17px; margin-top: 1.5px;
  border: 2px solid color-mix(in srgb, var(--c) 60%, transparent);
  border-radius: 50%; position: relative; transition: all .2s;
}
.lvl-opt.on .lvl-opt-check { background: var(--c); border-color: var(--c); }
.lvl-opt.on .lvl-opt-check::after {
  content: "✓"; position: absolute; inset: 0; display: flex;
  align-items: center; justify-content: center;
  color: white; font-size: 10.5px; font-weight: 800;
}
.lvl-opt-text { font-size: 13.5px; color: #5B3E1F; line-height: 1.5; }
.lvl-opt-text strong { color: var(--c); }

/* ── Editorial pages: About, Become a Honeybee ───────────────────
   Both are columns of running text rather than grids of cards. The
   sitewide --section-pad-y is tuned for card sections, where a card
   needs real air around it; on a page of paragraphs the same value
   reads as a lake of empty space between two sentences (200px sat
   between the opening statement and THE STORY at 1920px).

   Redefining the token on the page wrapper is all it takes: every
   section inside — .about-sec, .section-support, .seva, .about-cta,
   .hb-welcome — picks up the tighter rhythm through the cascade,
   and no page outside these two is touched.

   The middle term is `Xvw + Ypx`, not plain vw: a pure-vw clamp of
   this size hits its floor around 1180px and then sits flat all the
   way down to a phone, so tablet and mobile stop responding
   entirely. The shallow slope keeps it moving across the whole
   range — roughly 34 → 39 → 48 → 58 → 68px from 375 to 2560. */
.page--about, .page--honeybee { --section-pad-y: clamp(34px, 2.2vw + 16px, 68px); }

/* The About page opens as ONE composition — title, subtitle, the
   central statement, the invitation — not four blocks with a
   section break between each. The first band continues the header
   instead of restarting after it. */
.page--about .page-head-wrap + .about-sec { padding-top: clamp(14px, 1vw + 6px, 30px); }

/* A heading that introduces running text sits closer to it than one
   introducing a grid of cards (the shared .section-head spacing is
   set for the latter). Scoped to the prose columns on these pages. */
.page--about .mw-780 .section-head,
.page--honeybee .mw-780 .section-head,
.page--honeybee .mw-960 .section-head { margin-bottom: clamp(16px, 0.9vw + 7px, 30px); }

/* The last paragraph in a group keeps its trailing margin, which
   then stacks on top of the section's own padding — a 19px surprise
   on every band boundary. Paragraphs inside a group stay connected;
   the group's edge is the section's job. */
.page--about .prose:last-child,
.page--honeybee .prose:last-child { margin-bottom: 0; }

/* ── About page ──────────────────────────────────────────────────
   Banded sections in the site's shared rhythm: white → petal →
   white → petal → dusk CTA. Nav cards reuse the journey-card
   system; the fly/bee metaphor gets a side-by-side pair. */
.about-sec { padding: var(--section-pad-y) var(--page-pad-x); }
.about-sec--petal { background: var(--petal); }
.about-sec .section-head { text-align: center; }

.duo-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-md);
  max-width: min(100%, clamp(860px, 62vw, 1120px)); margin: 0 auto;
}
.duo-card {
  container-type: inline-size;
  position: relative; overflow: hidden; background: white;
  border: 1px solid #E8C06033; border-radius: 16px;
  padding: clamp(22px, 2vw, 38px) clamp(20px, 1.9vw, 36px); text-align: left;
}
.duo-card--fly { --c: #8A8578; }   /* muted, faded — the fly's world */
.duo-card--bee { --c: var(--honey); }
.duo-accent {
  position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--c), color-mix(in srgb, var(--c) 40%, transparent));
}
.duo-title { font-family: var(--font-serif); font-size: 22px; color: var(--c); margin-bottom: 10px; }
.duo-card--fly .duo-title { color: #6F6A5E; }
.duo-text { font-size: 14.5px; line-height: 1.7; color: var(--text-mid); }
.duo-title { font-size: clamp(22px, 5.4cqi, 27px); }
.duo-text  { font-size: clamp(14.5px, 3.9cqi, 16.5px); }

.about-cta {
  position: relative; overflow: hidden; text-align: center;
  padding: calc(var(--section-pad-y) * 1.15) var(--page-pad-x);
  background: linear-gradient(160deg, var(--dusk), var(--deep-earth));
}
.about-cta-title { font-family: var(--font-serif); font-weight: 300; font-size: clamp(26px, 3vw, 48px); color: var(--cream); margin-bottom: 10px; }
.about-cta-sub { font-size: clamp(15px, 0.18vw + 14.4px, 18px); color: #F5EFE685; margin-bottom: clamp(24px, 2.4vw, 40px); }
.about-cta-row { display: flex; gap: var(--gap-sm); justify-content: center; flex-wrap: wrap; }

@media (max-width: 700px) {
  .duo-grid { grid-template-columns: 1fr; gap: 14px; }
}

/* Trust facts on the About page: four cards. Two by two on a laptop,
   four across once each one can still hold a readable paragraph —
   held at 2×2 they became 660px-wide cards with three lines in them.
   Fixed counts, not auto-fit: with exactly four cards an auto grid
   lands on three and leaves one alone on a second row. */
.duo-grid--wide { max-width: min(100%, clamp(1000px, 74vw, 1400px)); }
@media (min-width: 1560px) {
  .duo-grid--wide { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: min(100%, var(--w-mid)); }
}

/* ── Consistent vertical rhythm ─────────────────────────────────
   Every homepage content section breathes the same amount: one
   shared vertical padding (the hero and footer keep their own
   proportions). --section-pad-y is defined once in the token block
   as clamp(48px, 5.2vw, 108px), so the rhythm opens up continuously
   from a phone to a large display rather than switching between two
   fixed values at 700px. Horizontal padding is untouched. */
.section-featured, .section-philosophy, .section-bhakti,
.section-verse, .seva, .section-news, .about-sec, .listing,
.section-support, .section-trust {
  padding-top: var(--section-pad-y);
  padding-bottom: var(--section-pad-y);
}

/* "All Levels": gatherings open to every stage of the journey */
:root { --lvl-all: #6E9DB8; }
.lvl-all { --c: var(--lvl-all); }

/* ═══ Membership & member preview (Phase 2) ══════════════════════ */

/* Presale badge on event cards — lotus pink, shaped like lvl-badge */
.presale-badge {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2.5px 9px; border-radius: 20px;
  font-size: 10px; font-weight: 700; letter-spacing: .4px;
  text-transform: uppercase;
  color: #B5544A; border: 1px solid #B5544A55;
  background: #F7C8C030;
  white-space: nowrap;
}
.panel-note--presale { color: var(--deep-earth); background: #F7C8C022; border-radius: 12px; padding: 12px 14px; }

/* Inline text link (buttons that read as links) */
.link-plain {
  background: none; border: none; padding: 0; cursor: pointer;
  font: inherit; font-weight: 600; color: var(--honey);
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.link-plain:hover { color: var(--deep-earth); }

/* Follow button on guide profiles (member preview) */
.follow-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 16px; border-radius: 50px; cursor: pointer;
  border: 1px solid #B5544A55; background: white;
  color: #B5544A; font-size: 14px; font-family: var(--font-sans);
  transition: all .2s;
}
.follow-btn:hover { border-color: #B5544A; background: #F7C8C018; }
.follow-btn.on { background: #B5544A; border-color: #B5544A; color: white; font-weight: 600; }
.guide-heart { color: #B5544A; font-size: 15px; line-height: 1; }

/* MY GUIDES strip on the guides page */
.my-guides {
  background: white; border: 1.5px solid #E8C06035; border-radius: 16px;
  padding: 18px 20px; margin-bottom: 26px;
}
.my-guides-head {
  font-family: var(--font-sans); font-size: 12px; font-weight: 700;
  letter-spacing: .14em; color: var(--deep-earth); margin-bottom: 12px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.my-guides-badge {
  font-size: 10px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: #B5544A;
  border: 1px solid #B5544A45; background: #F7C8C025;
  border-radius: 20px; padding: 2.5px 9px;
}
.my-guides-sub { font-size: 13.5px; color: var(--text-light); margin: 12px 0 0; line-height: 1.55; }

/* ═══ Honeybee benefits page ═════════════════════════════════════ */
/* Six tiles, three across and two down, so the whole offer is taken
   in at a glance instead of scrolled through as a list.
   Every tile has one structure at every size — icon, title, then the
   supporting line — and the three tiles in a row share their rows
   via subgrid, so the icons sit on one line, the titles on one line,
   and the descriptions finish on one line. Without that the row is
   only as tidy as the copy happens to be: descriptions run to two or
   three lines depending on the width, which used to leave each tile
   with a different amount of dead space above its bottom edge (up to
   64px apart between neighbours). */
.hb-benefits {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap-md);
  /* Six tiles holding a title and one line each: past this the tiles
     stop growing and the section keeps its shape rather than turning
     into three 550px slabs on a 4K display */
  max-width: min(100%, var(--w-mid)); margin-inline: auto;
}
.hb-benefit {
  /* The gap between icon, title and line — shared by both the
     flex fallback and the subgrid path below so they stay identical */
  --hb-row-gap: clamp(10px, 0.9vw, 16px);
  /* One centred column: icon, title, then the line beneath it */
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  gap: var(--hb-row-gap);
  background: white; border-radius: 18px; padding: clamp(22px, 1.9vw, 36px) clamp(20px, 1.8vw, 34px) clamp(24px, 2vw, 38px);
  border: 1px solid color-mix(in srgb, var(--c, var(--honey)) 20%, transparent);
  border-top: 3px solid var(--c, var(--honey));
  box-shadow: 0 2px 10px #5B3E1F08;
  transition: transform .2s ease, box-shadow .2s ease;
}
.hb-benefit:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px #5B3E1F14;
}
/* Fallback for browsers without subgrid */
.hb-benefit-text { display: flex; flex-direction: column; align-items: center; width: 100%; }
.hb-benefit-icon {
  /* One circle size for all six, growing gently with the page */
  --hb-icon: clamp(46px, 2.9vw, 56px);
  width: var(--hb-icon); height: var(--hb-icon); flex: 0 0 var(--hb-icon);
  margin-inline: auto;
  border-radius: 50%;
  background: color-mix(in srgb, var(--c, var(--honey)) 10%, white);
  border: 1px solid color-mix(in srgb, var(--c, var(--honey)) 30%, transparent);
  display: flex; align-items: center; justify-content: center;
}
.hb-benefit-title {
  font-family: var(--font-sans); font-weight: 600;
  font-size: clamp(16px, 0.16vw + 15.4px, 18px);
  color: var(--deep-earth); margin-bottom: 0;
}
.hb-benefit-desc { font-size: clamp(14px, 0.13vw + 13.5px, 15.5px); color: var(--text-light); line-height: 1.6; margin: 0; }

/* Three cards in a row become one shared set of rows: icon row,
   title row, description row. Each tile lends its children to the
   parent grid (display: contents on the text wrapper), spans the
   three rows, and keeps its own tighter row gap.

   Each row is sized to the tallest tile in it and every child sits
   at the START of its row, so the six icons land on one line, the
   six titles on one line and the six descriptions all begin on one
   line — a two-line description simply leaves its own tile a little
   short of the bottom rather than dragging the row out of step.
   Re-solved by the browser at every width, so it stays true at 3, 2
   and 1 columns without a single extra rule. */
@supports (grid-template-rows: subgrid) {
  .hb-benefits { grid-auto-rows: auto; }
  .hb-benefit {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
    row-gap: var(--hb-row-gap);
    align-items: start;
    justify-items: stretch;
  }
  .hb-benefit-text { display: contents; }
}

@media (max-width: 899.98px) { .hb-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599.98px) { .hb-benefits { grid-template-columns: minmax(0, 1fr); } }

/* ── The welcome ──────────────────────────────────────────────
   The invitation opens on a soft wax surface — the same comb the
   rails use, so joining feels like stepping into the hive rather
   than reading a pitch panel. The texture melts away downward so
   the page carries on without a seam. */
.hb-welcome {
  position: relative; overflow: hidden;
  padding: var(--section-pad-y) var(--page-edge) calc(var(--section-pad-y) * .85);
}
.hb-welcome::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-color: #E8D5AE24;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='34.64' viewBox='0 0 30 34.64'%3E%3Cg fill='none' stroke='%23A87C2E' stroke-width='0.85' opacity='0.055'%3E%3Cpolygon points='15,2 28,9.5 28,25 15,32 2,25 2,9.5'/%3E%3Cpolygon points='30,19 43,26.5 43,42 30,49.5 17,42 17,26.5'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(120% 90% at 50% 0%, #FFFFFF8C 0%, #FFFFFF00 70%);
  background-size: 46px 53.1px, auto;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 58%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, #000 58%, transparent 100%);
}
/* The composition takes a proper share of a wide screen while each
   block inside it keeps its own reading measure: the headline may
   use the full width, the paragraphs stay near 64ch, the quote
   narrower still. Capped at 880px before, which left the whole
   invitation stranded in a column down the middle of a 1920 display
   with 500px of empty page on either side. */
.hb-welcome-inner {
  position: relative; z-index: 1; text-align: center;
  width: min(100%, 1200px); max-width: none; margin-inline: auto;
}
.hb-welcome-title {
  font-family: var(--font-serif); font-weight: 400;
  font-size: clamp(28px, 3vw, 52px); line-height: 1.15;
  color: var(--deep-earth); margin: 0 auto clamp(16px, 1.5vw, 28px);
  /* Its own measure inside the wider composition, so it never runs
     the full 1200px as a single very long line */
  max-width: min(100%, 1000px);
}
/* The first line carries the honeybee image, so it is given a
   little more air and weight than the explanation beneath it */
.hb-welcome-lead {
  font-size: 16.5px; line-height: 1.85; color: var(--text-mid);
  margin: 0 auto 16px; max-width: 64ch;
}
.hb-welcome-lead--first {
  font-family: var(--font-serif); font-size: clamp(18px, 2.2vw, 21px);
  line-height: 1.7; color: var(--deep-earth); margin-bottom: 20px;
}
.hb-welcome-lead:last-child { margin-bottom: 0; }

/* ── The closing and the ask ──────────────────────────────────
   The promise is stated before the button, so joining reads as the
   next step in the story rather than a transaction. */
/* Fixed `ch` measures were chosen to force a particular line break
   at laptop size, and then never moved: the closing headline sat in
   a 403px column and the invitation in a 360px one, inside a
   1040px section — pinched, on a large screen. Both measures are
   fluid now, and `balance` keeps the break even wherever it falls
   instead of the count doing that job. */
.hb-closing-lead {
  font-family: var(--font-serif); font-size: clamp(21px, 0.73vw + 17.4px, 33px);
  line-height: 1.4; color: var(--deep-earth);
  margin: 0 auto clamp(12px, 1vw, 20px);
  max-width: min(100%, clamp(420px, 40vw, 780px)); text-wrap: balance;
}
.hb-closing-sub {
  font-size: clamp(16px, 0.14vw + 15.4px, 18px); line-height: 1.8; color: var(--text-mid);
  margin: 0 auto; max-width: min(100%, clamp(520px, 46vw, 820px));
}
.hb-join { margin-top: 34px; display: flex; flex-direction: column; align-items: center; gap: 0; }
.bg--lg { padding: 16px 34px; font-size: 16px; }
.hb-join-support {
  font-family: var(--font-serif); font-style: normal;
  font-size: 16px; color: var(--text-mid); margin: 16px 0 0;
}
.hb-join-price { font-size: 13px; color: var(--text-light); margin: 6px 0 0; }
.hb-join-signin { font-size: 13.5px; color: var(--text-light); margin: 18px 0 0; }

/* ── The honeybee story ───────────────────────────────────────
   The hive image the whole membership rests on: each bee brings
   back a little, and together the comb is filled. Kept to one
   quiet line in each place so it stays a feeling, not a slogan. */
.hb-story {
  font-family: var(--font-serif); font-style: normal;
  font-size: clamp(16px, 2vw, 18px); line-height: 1.75;
  color: var(--text-mid); max-width: 46ch;
  margin: 26px auto 0; padding-top: 22px;
  border-top: 1px solid #8B623020;
}
.hb-story-line {
  font-family: var(--font-serif); font-size: clamp(17px, 0.45vw + 14.1px, 24px);
  line-height: 1.6; color: var(--deep-earth);
  margin: clamp(18px, 1.6vw, 30px) auto 0;
  max-width: min(100%, clamp(320px, 30vw, 580px)); text-wrap: balance;
}

/* ── Why there is a membership — the open answer ───────────────
   A plain accordion: one question visible at a time, the first
   already open. Bordered rows rather than cards, so the section
   stays calm next to the benefit tiles above it. */
/* Two things were fighting here. Narrowing the column brought the
   caret closer to its question but left the whole section as a
   568px strip with 760px of empty page either side on a large
   display; widening it filled the page but stranded the caret 300 to
   500px past the end of a short question.

   They are only in conflict while the caret is pinned to the far
   right. So it is not: the question sits in a column of its own,
   capped at 46ch — wide enough for the longest of the three on one
   line — and the caret follows immediately after it. Every caret
   still lands on the same line as its neighbours, but a hand's
   width from its question rather than a screen's width. The column
   is then free to take a proper share of the page, and the open
   ANSWER is what fills it. */
.hb-faq, .hb-faq-key { --faq-col: min(100%, clamp(640px, 50vw, 980px)); }
.hb-faq {
  max-width: var(--faq-col); margin: 0 auto;
  border-top: 1px solid #8B623020;
}
.hb-faq-item { border-bottom: 1px solid #8B623020; }
/* The question column is capped, not stretched, and the caret takes
   the next column — so the caret follows the text instead of the
   container's right edge, and still aligns row to row. */
.hb-faq-q {
  width: 100%; display: grid;
  /* minmax(0, 46ch), not min(46ch, 100%): the track has to be able
     to SHRINK below its cap on a phone, or the caret column is
     pushed past the row's right edge. */
  grid-template-columns: minmax(0, 46ch) auto;
  justify-content: start;
  align-items: start; gap: clamp(12px, 1vw, 18px);
  text-align: left;
  background: none; border: none; cursor: pointer;
  padding: clamp(14px, 0.35vw + 11px, 18px) 4px;
  font-family: var(--font-sans);
  font-size: clamp(15.5px, 0.16vw + 15px, 17.5px); font-weight: 500;
  line-height: 1.5; color: var(--deep-earth);
  transition: color .2s ease, padding .2s ease;
}
.hb-faq-q:hover { color: var(--honey); }
.hb-faq-q:focus-visible { outline: 2px solid var(--honey); outline-offset: 2px; border-radius: 6px; }
.hb-faq-q-text { min-width: 0; }
/* Shares the question's line box, so the caret sits on the first
   line rather than floating above or below it */
.hb-faq-caret {
  color: var(--honey); font-size: 13px; line-height: inherit;
  transition: transform .25s ease;
}
.hb-faq-item.is-open .hb-faq-caret { transform: rotate(180deg); }
/* An open question and its answer are one block: the question gives
   up most of its lower padding so the answer reads as belonging to
   it rather than as the next thing down the page. */
.hb-faq-item.is-open .hb-faq-q { padding-bottom: clamp(4px, 0.2vw + 3px, 8px); }
.hb-faq-a { padding: 0 4px clamp(16px, 0.4vw + 13px, 24px); }
/* The answer is the widest thing in the section, so it is what
   gives the column its width — 68ch keeps the measure readable
   while filling most of the row */
.hb-faq-p {
  font-size: clamp(15px, 0.12vw + 14.4px, 16.5px); line-height: 1.8; color: var(--text-mid);
  margin: 0 0 clamp(10px, 0.5vw + 7px, 16px); max-width: 68ch;
}
.hb-faq-p:last-child { margin-bottom: 0; }
/* The one sentence that matters most, held apart from the
   questions so it lands on its own. Same width as the list above
   it, and the bee shares the text's line box so the two line up on
   the first line instead of the emoji riding high. */
.hb-faq-key {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  align-items: start; gap: clamp(12px, 1.1vw, 18px);
  max-width: var(--faq-col); margin: clamp(24px, 2.2vw, 40px) auto 0;
  padding: clamp(18px, 1.6vw, 28px) clamp(20px, 1.8vw, 30px); border-radius: 18px;
  background: #E8C0601A; border: 1px solid #E8C06038;
}
.hb-faq-key-bee { font-size: clamp(18px, 1vw, 21px); line-height: 1.65; }
.hb-faq-key-text {
  margin: 0; font-family: var(--font-serif);
  font-size: clamp(15.5px, 0.14vw + 15px, 17.5px); line-height: 1.65;
  color: var(--deep-earth);
}

/* Founding Honeybees — early members and supporters */
.founding-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, clamp(150px, 11vw, 210px)), 1fr));
  gap: var(--gap-md); max-width: min(100%, clamp(720px, 52vw, 1100px)); margin: 0 auto;
}
.founding-card {
  background: white; border: 1.5px solid #E8C06035; border-radius: 18px;
  padding: 22px 16px; text-align: center;
  box-shadow: 0 2px 10px #5B3E1F08;
  transition: transform .2s ease, box-shadow .2s ease;
}
.founding-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px #5B3E1F14;
}
.founding-photo {
  width: 72px; height: 72px; border-radius: 50%; object-fit: cover;
  margin: 0 auto 12px; display: block; border: 2px solid #E8C06055;
}
.founding-photo--ph {
  background: var(--grad-honey);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-serif); font-size: 28px; color: white;
}
.founding-name { font-family: var(--font-sans); font-weight: 600; font-size: 15px; color: var(--deep-earth); }
.founding-line { font-size: 13px; color: var(--text-light); margin-top: 3px; line-height: 1.5; }

/* Members' Monthly Gathering card (My Account) */
.gathering-topic { margin: 0; font-family: var(--font-serif); font-size: 19px; color: var(--text-dark); line-height: 1.35; }
.gathering-guest { margin: 0; font-size: 14px; font-weight: 600; color: var(--honey-text, var(--honey)); }

/* ═══ Listing tiers & add-ons (Phase 3) ══════════════════════════ */
.listing-grid--three { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
/* Four durations now (14 / 30 / 60 / 90). Fixed column counts rather
   than auto-fit, so the set never breaks into a lonely orphan row —
   4 across, then 2×2, then a single column on phones. */
.listing-grid--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Four across only once each plan can still show its price and
   feature list comfortably (~250px); below that, two by two */
@media (max-width: 1149.98px) { .listing-grid--four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 559.98px)  { .listing-grid--four { grid-template-columns: 1fr; } }
/* At four across the cards are narrower — ease the padding and let
   the price note wrap rather than overflow */
.listing-grid--four .plan-price-note { white-space: normal; }
/* A listing card given more room states its price larger, rather
   than leaving the extra width blank — scaled off the card itself */
.plan-price        { font-size: clamp(34px, 11cqi, 50px); }
.plan-for          { font-size: clamp(14px, 4cqi, 16px); }
.plan-feature-text { font-size: clamp(14px, 4cqi, 16px); }

/* What happens when a listing period ends — stated before payment,
   never left to be discovered afterwards. Sits on the same centred
   measure as the intro above it, so the section reads down one
   spine instead of stepping in and out. */
.listing-ends {
  display: flex; align-items: flex-start; gap: 12px;
  max-width: var(--listing-measure, min(100%, 800px));
  margin: var(--listing-step, 40px) auto 0;
  padding: clamp(16px, 1.4vw, 26px) clamp(18px, 1.7vw, 32px); border-radius: 16px;
  background: #E8C0601A; border: 1px solid #E8C06038; text-align: left;
}
.listing-ends-star { color: var(--honey); font-size: 14px; line-height: 1.75; flex: none; }
.listing-ends-text { margin: 0; font-size: 14px; line-height: 1.75; color: var(--text-mid); }
.listing-ends-text strong { color: var(--deep-earth); font-weight: 600; }

/* The add-on block is a continuation of the pricing block, not a
   separate island: its heading uses the section's own step, and the
   gap under it matches the gap under the section heading. */

/* The chosen listing, restated where the decision is made: price and
   duration on one line, then what happens when the days run out. */
.tier-summary {
  margin: 16px 0 4px; padding: 16px 18px; border-radius: 12px;
  background: white; border: 1.5px solid var(--honey);
}
.tier-summary-price {
  font-family: var(--font-mono); font-size: 19px; font-weight: 600;
  color: var(--deep-earth); letter-spacing: -.01em; margin-bottom: 8px;
}
.tier-summary-ends { margin: 0; font-size: 13px; line-height: 1.7; color: var(--text-mid); }


/* Official-directory pointer at the top of the Sacred Places tab */
.places-official {
  background: #E8C06012; border: 1px dashed #E8C06045; border-radius: 12px;
  padding: 14px 18px; margin: -8px 0 30px;
  font-size: 14px; color: var(--text-mid); line-height: 1.6; text-align: center;
}
.places-official a { color: var(--honey); font-weight: 600; white-space: nowrap; }
.guide-empty-more { margin: 14px 0 0; font-size: 14px; }
.guide-empty-more a { color: var(--honey); font-weight: 600; }

/* ═══ Flat event map (Leaflet prototype) ═════════════════════════ */
.map-view-row {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 12px; margin-bottom: 10px;
}

.map-flat { position: relative; }
.map-flat-canvas {
  /* Sized by the window it is in, both ways: taller on a large
     display, shorter on a laptop in a half-height window, so the
     results list below it is never pushed entirely off-screen. svh
     keeps mobile browser chrome out of the calculation. */
  height: clamp(340px, 56svh, 720px); width: 100%;
  border-radius: 18px; overflow: hidden;
  /* The one blue line: the map's frame carries the globe's blue,
     while the canvas itself stays neutral for legibility */
  border: 2px solid #6E9DB8;
  box-shadow: 0 0 0 4px #6E9DB818, 0 6px 20px #295B8E14;
  background: #EDEAE2; /* holds the space while tiles arrive */
  z-index: 0;          /* keep Leaflet's panes under the site nav */
}
/* The basemap stays deliberately neutral (tried a blue-tinted
   version; it fought the markers and labels): on the quiet grey
   canvas the honey clusters and pink lotuses carry the brand. */
/* Place-name lettering stays UNTINTED (Esri's native near-black):
   a blue tint was tried and read poorly on phones — dark text is
   the legible choice, and the blue lives in the map's frame. */
.map-flat-loading {
  position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; pointer-events: none;
  font-family: var(--font-sans); font-size: 14px; color: var(--text-light);
  letter-spacing: .06em;
}

/* Lotus pins: the same artwork as the globe, sized for the map */
.bb-lotus-pin { background: none; border: none; }
.bb-lotus-pin svg { width: 34px; height: 34px; display: block; filter: drop-shadow(0 2px 3px rgba(58,32,10,.35)); }

/* Cluster bubbles: honey gold with a soft bloom */
.bb-cluster { background: none; border: none; }
.bb-cluster div {
  width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 32% 30%, #E8B84B, #C9952E);
  border: 2.5px solid #FBF6EE;
  box-shadow: 0 3px 10px rgba(91,62,31,.35), 0 0 0 5px rgba(212,161,65,.18);
  color: white; font-family: var(--font-sans); font-weight: 700; font-size: 14.5px;
}

/* Marker tooltip in the brand voice */
.bb-map-tip {
  background: #FBF6EE; border: 1px solid #E8C06055; border-radius: 10px;
  color: var(--text-dark); font-family: var(--font-sans); font-size: 12.5px;
  line-height: 1.45; padding: 7px 11px;
  box-shadow: 0 4px 14px rgba(91,62,31,.18);
}
.bb-map-tip strong { color: var(--deep-earth); }
.bb-map-tip::before { border-top-color: #E8C06055; }

/* Leaflet chrome, softened to the brand */
.map-flat .leaflet-control-zoom a {
  color: var(--deep-earth); border-color: #E8C06045;
}
.map-flat .leaflet-control-attribution {
  background: rgba(251,246,238,.85); color: var(--text-light);
  font-size: 10px; border-radius: 8px 0 0 0;
}
.map-flat .leaflet-control-attribution a { color: var(--text-mid); }

@media (max-width: 700px) {
  .map-flat-canvas { height: clamp(320px, 50svh, 480px); border-radius: 14px; }
}

/* One lotus per city: count badge + the city's gathering list */
.bb-lotus-count {
  position: absolute; top: -7px; right: -9px;
  min-width: 19px; height: 19px; padding: 0 5px;
  border-radius: 12px; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 32% 30%, #E8B84B, #C9952E);
  border: 1.5px solid #FBF6EE;
  color: white; font-family: var(--font-sans); font-weight: 700; font-size: 11px;
  box-shadow: 0 2px 6px rgba(91,62,31,.35);
}
.bb-city-popup .leaflet-popup-content-wrapper {
  background: #FBF6EE; border: 1px solid #E8C06055; border-radius: 14px;
  box-shadow: 0 10px 30px rgba(91,62,31,.25);
}
.bb-city-popup .leaflet-popup-content { margin: 10px 12px; }
.bb-city-popup .leaflet-popup-tip { background: #FBF6EE; border: 1px solid #E8C06055; }
.bb-city-pop { display: flex; flex-direction: column; gap: 6px; min-width: 210px; }
.bb-city-pop-head {
  font-family: var(--font-sans); font-size: 12px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--deep-earth);
  padding: 2px 4px 6px; border-bottom: 1px solid #E8C06035;
}
.bb-city-pop-item {
  display: flex; flex-direction: column; gap: 2px; text-align: left;
  background: white; border: 1px solid #E8C06035; border-radius: 10px;
  padding: 9px 11px; cursor: pointer; transition: all .18s;
  font-family: var(--font-sans);
}
.bb-city-pop-item:hover { border-color: var(--honey); transform: translateY(-1px); }
.bb-city-pop-item strong { font-size: 13.5px; color: var(--deep-earth); line-height: 1.35; }
.bb-city-pop-item span { font-size: 12px; color: var(--text-light); font-family: var(--font-mono); }

/* About page: four doors into the site, two by two — and four across
   once the page is wide enough to give each one a real card */
.journey-grid--four { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: min(100%, clamp(860px, 62vw, 1120px)); margin: 0 auto; }
@media (min-width: 1500px) { .journey-grid--four { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: min(100%, var(--w-mid)); } }
@media (max-width: 700px) { .journey-grid--four { grid-template-columns: minmax(0, 1fr); } }

/* Member sign-in (beta) */
.signin-card {
  background: white; border: 1.5px solid #E8C06035; border-radius: 18px;
  padding: clamp(26px, 2.4vw, 44px) clamp(24px, 2.2vw, 40px); max-width: min(100%, clamp(420px, 32vw, 560px)); margin: 0 auto;
  display: flex; flex-direction: column; gap: 4px;
}
.signin-note { font-size: 13.5px; color: var(--text-light); line-height: 1.6; margin: 14px 0 0; text-align: center; }
/* ═══ Account menu (nav) ═════════════════════════════════════════ */
/* One avatar entry point in the nav; My Account and Sign out live
   in its dropdown — the profile-menu pattern every member knows. */
.account-menu { position: relative; display: flex; align-items: center; }
.account-btn {
  display: flex; align-items: center; gap: 5px;
  background: none; border: none; cursor: pointer; padding: 0;
}
.account-avatar {
  width: 30px; height: 30px; border-radius: 50%; flex: 0 0 30px;
  background: var(--grad-honey); color: #3A200A;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-sans); font-weight: 700; font-size: 14px;
  box-shadow: 0 2px 8px #D4A14140;
}
.account-btn:hover .account-avatar { box-shadow: 0 3px 12px #D4A14170; }
.account-btn.on .account-avatar { outline: 2px solid var(--honey); outline-offset: 2px; }
.account-caret { font-size: 9px; color: var(--text-light); transition: transform .2s ease; }
.account-btn[aria-expanded="true"] .account-caret { transform: rotate(180deg); }
.account-dropdown {
  position: absolute; top: calc(100% + 14px); right: 0; min-width: 200px;
  background: white; border: 1px solid #E8C06040; border-radius: 14px;
  box-shadow: 0 12px 36px #5B3E1F22; padding: 8px; z-index: 300;
  animation: acct-in .16s ease;
}
@keyframes acct-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}
.account-dropdown-head {
  font-size: 12px; color: var(--text-light); padding: 8px 12px 10px;
  border-bottom: 1px solid #8B623015; margin-bottom: 6px; white-space: nowrap;
}
.account-dropdown-head strong { color: var(--deep-earth); font-weight: 600; }
.account-dropdown-item {
  display: block; width: 100%; text-align: left;
  background: none; border: none; cursor: pointer;
  font-family: var(--font-sans); font-size: 14px; color: var(--text-mid);
  padding: 10px 12px; border-radius: 9px; transition: background .15s ease;
}
.account-dropdown-item:hover { background: #E8C06018; color: var(--deep-earth); }
.account-dropdown-item--signout { color: var(--text-light); }

/* My Account */
.account-body { display: flex; flex-direction: column; gap: 18px; }
.account-card {
  background: white; border: 1.5px solid #E8C06035; border-radius: 18px;
  padding: 24px 26px; display: flex; flex-direction: column; gap: 12px;
  align-items: flex-start;
  box-shadow: 0 2px 10px #5B3E1F08;
}
.account-card-head {
  font-family: var(--font-sans); font-size: 12px; font-weight: 700;
  letter-spacing: .14em; color: var(--text-light);
}
.account-line { margin: 0; font-size: 15px; color: var(--text-mid); }
.account-status { color: #7A8C5E; font-weight: 600; }
.account-dim { margin: 0; font-size: 14px; color: var(--text-light); line-height: 1.6; }

/* ═══ Sacred calendar strip ══════════════════════════════════════ */
.sacred-strip {
  position: relative; overflow: hidden;
  background: var(--petal, #FAF3EC);
  padding-top: var(--section-pad-y); padding-bottom: var(--section-pad-y);
}
/* The calendar as plain content inside the Resources column — no
   tinted strip, no heading of its own (the category supplies it) */
.sacred-bare { position: relative; }
.sacred-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, clamp(230px, 17vw, 300px)), 1fr));
  gap: var(--gap-md); margin-bottom: 22px;
}
.sacred-card {
  background: white; border-radius: 16px; padding: clamp(18px, 1.6vw, 30px) clamp(20px, 1.7vw, 32px);
  border: 1px solid color-mix(in srgb, var(--c, var(--honey)) 22%, transparent);
  border-left: 4px solid var(--c, var(--honey));
  display: flex; flex-direction: column; gap: 7px; align-items: flex-start;
}
.sacred-when { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.sacred-date {
  font-family: var(--font-mono); font-size: 13px; font-weight: 600;
  color: var(--deep-earth); letter-spacing: .04em; text-transform: uppercase;
}
.sacred-in { font-size: 12px; font-weight: 700; color: var(--c, var(--honey)); }
.sacred-name { font-family: var(--font-serif); font-size: 19px; color: var(--text-dark); line-height: 1.3; }
.sacred-note-text { font-size: 13.5px; color: var(--text-light); line-height: 1.55; }
.sacred-note { font-size: 13px; color: var(--text-light); text-align: center; margin: 0; }

/* Month-grid calendar */
/* The month grid keeps a sensible proportion of the row as the page
   widens rather than staying a fixed slab beside a stretching list */
.cal-wrap { display: grid; grid-template-columns: minmax(280px, clamp(340px, 26vw, 480px)) minmax(0, 1fr); gap: var(--gap-lg); margin-bottom: 22px; align-items: start; }
@media (max-width: 760px) { .cal-wrap { grid-template-columns: minmax(0, 1fr); } }
.cal {
  background: white; border: 1.5px solid #E8C06035; border-radius: 18px;
  padding: clamp(16px, 1.4vw, 26px) clamp(16px, 1.4vw, 26px) clamp(12px, 1.1vw, 20px);
}
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.cal-month { font-family: var(--font-serif); font-size: 19px; color: var(--deep-earth); }
.cal-nav {
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid #E8C06055;
  background: white; color: var(--deep-earth); font-size: 18px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: all .2s;
}
.cal-nav:hover:not(:disabled) { border-color: var(--honey); color: var(--honey); }
.cal-nav:disabled { opacity: .3; cursor: default; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.cal-dow {
  text-align: center; font-family: var(--font-sans); font-size: 10.5px;
  font-weight: 700; letter-spacing: .08em; color: var(--text-light); padding: 4px 0 6px;
}
.cal-blank { height: 40px; }
.cal-day {
  position: relative; height: 40px; border-radius: 10px; border: none;
  background: none; font-family: var(--font-sans); font-size: 13.5px;
  color: var(--text-mid); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px; cursor: default;
}
.cal-day.has {
  cursor: pointer;
  background: color-mix(in srgb, var(--c, var(--honey)) 12%, white);
  color: var(--deep-earth); font-weight: 700;
}
.cal-day.has:hover { background: color-mix(in srgb, var(--c, var(--honey)) 22%, white); }
.cal-day.on { outline: 2px solid var(--c, var(--honey)); }
.cal-day.today .cal-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  border: 1.5px solid var(--honey); color: var(--deep-earth); font-weight: 700;
}
.cal-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--c, var(--honey)); }
.cal-legend { display: flex; gap: 14px; justify-content: center; margin-top: 12px; flex-wrap: wrap; }
.cal-legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-light); }
.cal-legend-dot { width: 8px; height: 8px; border-radius: 50%; }
.cal-list { display: flex; flex-direction: column; gap: 12px; }
.cal-empty { margin: 0; font-size: 14px; color: var(--text-light); line-height: 1.6; }
.sacred-card.is-past { opacity: .55; }
.sacred-card.on { box-shadow: 0 0 0 2px var(--c, var(--honey)); }

/* Homepage upcoming-events calendar: month grid on the left, the
   three next gatherings (or the chosen day's) stacked on the right.
   The grid itself reuses the .cal-* rules above. */
.ucal-wrap {
  display: grid; grid-template-columns: minmax(280px, clamp(340px, 25vw, 460px)) minmax(0, 1fr);
  gap: var(--gap-xl); align-items: start;
}
@media (max-width: 900px) { .ucal-wrap { grid-template-columns: minmax(0, 1fr); } }
.ucal-hint {
  margin: 12px 0 0; text-align: center; font-size: 12.5px;
  color: var(--text-light); line-height: 1.5;
}
/* The three next gatherings beside the month grid. A column while
   the space is narrow; as the panel widens they lay out two or three
   across instead of becoming 1000px-wide banners with two lines in
   them — and the block ends up a similar height to the calendar. */
.ucal-list {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: var(--gap-grid); align-content: start;
}
.ucal-daybar {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.ucal-dayname { font-family: var(--font-serif); font-size: 19px; color: var(--deep-earth); }
.ucal-reset {
  background: none; border: none; padding: 0; cursor: pointer;
  font-family: var(--font-sans); font-size: 13px; font-weight: 600; color: var(--honey);
}
.ucal-reset:hover { text-decoration: underline; }

/* Share options under the Share button */
.share-options { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 10px; }
button.chip-link { background: white; cursor: pointer; font-size: 14px; }