/* ═══════════════════════════════════════════════════════════════
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 ─────────────────────────────────── */
/* The Google Fonts request no longer lives here as an @import. An
@import inside a stylesheet is only discovered once the stylesheet
itself has arrived, so the faces used to start downloading a full
round trip after everything else. build.py now writes the request
as a in every page's , beside the preconnects, and
404.html carries its own copy. Montserrat is asked for as ONE
variable file per script (wght@300..700) rather than five static
weights — the same typeface, fewer files (7 Sep 2026). */
:root{
/* The site is a committed light design: warm cream, painted
explicitly. Saying so lets a browser in dark mode keep native
form controls and scrollbars light against the cream instead of
rendering them dark. A dark theme of BeeBhakti's own is a
founder decision, recorded in docs/build-log.md, 7 Sep 2026. */
color-scheme: light;
--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 */
--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: #7A5535; /* lighter warm text — was #87683C */
--error: #B3261E;
/* A category colour written as TEXT, as opposed to filling a pill
or an accent bar (F69, 8 Sep 2026). At 11px on its own tinted
badge, every one of the eleven type colours read between 2.4 and
4.0:1 on cream, all below the 4.5 the guidance asks for. Written
as text they take 58% of themselves and 42% of --text-dark,
which is the least darkening that carries the worst of them
past 4.6:1; the pill's tint, its border and every accent bar
keep the founder's colour untouched. The night theme tunes these
hues on its own ground, so there it is 100% and this does
nothing. */
--type-ink: 58%;
/* The same idea for a colour that arrives from the DATA rather than
from a gathering type — a resource kind, a calendar kind, a
speciality, a book's accent. Those cannot be themed, so one share
serves both appearances: --text-dark is the deep brown by day and
the ivory by night, and 52% carries the worst of them past 4.6:1
either way. */
--ink-data: 52%;
/* ── Roles, not hues (7 Sep 2026) ───────────────────────────
The founder's night theme (F64, D366) swaps colours by ROLE, so
the rules below name the role a colour plays. Every value here
is exactly the literal the rule carried before, which is what
keeps the light site pixel-identical; the night block at the end
of this file gives each role its dark value. */
--page: #FBF6EE; /* the page itself (= --warm-white) */
--page-soft: #FAF3EC; /* alternating sections (= --petal) */
--page-cream: #F5EFE6; /* the hero's top and a few strips (= --cream) */
--surface: #FFFFFF; /* cards, panels, menus: what was "white" */
--panel: #FBF6EE; /* sheets and modals that were warm-white */
--field: #FBF6EE; /* inputs */
--hover: #FAF3EC; /* a row or option under the pointer */
--selected: #FDF6E7; /* a chosen state's fill */
--photo-ph: #F5EADC; /* behind a portrait while it loads */
--skeleton: #EFE6D8; /* loading placeholders */
--on-accent: #FFFFFF; /* text on a honey fill */
--on-accent-strong: #3A200A; /* the primary buttons' darker text */
--on-dark: #FFFFFF; /* text on a dark band */
--ink-deep: #2E1A06; /* the deep brown mixed into type colours */
--honey-deep: #B0873A; /* a darker honey for two small lines */
--ember: #B5544A; /* the warm red of Follow and Presale */
--icon-muted: #87683C; /* the quiet stroke of search, fly, chevron */
--earth: #8B6230; /* mid earth: the speciality tags */
/* The whole site is set in Montserrat (Aug 2026). This token still
carries the name --font-serif because 52 rules reference it and the
distinction is worth keeping: it marks the DISPLAY text (headings,
titles, verses, wordmarks) as opposed to --font-sans for labels and
body. Both resolve to the same family today, so restoring a display
face means changing this one line back to
'Playfair Display', Georgia, serif
and adding Playfair+Display back to the @import above. */
--font-serif: 'Montserrat', system-ui, sans-serif;
--font-sans: 'Montserrat', system-ui, sans-serif;
--font-mono: 'DM Mono', 'SF Mono', monospace;
/* The header's page links only (14 Sep 2026, founder: match
timacamara.com) — small, uppercase and widely spaced. */
--font-nav: 'DM Sans', sans-serif;
--grad-honey: linear-gradient(135deg, var(--honey), var(--gold));
--grad-earth: linear-gradient(160deg, var(--deep-earth), var(--mid-bg));
/* ── 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-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 */
/* The two types added 24 Aug 2026. Neither is a new colour: each
points at a token this palette already carries, which is what
rule 2 asks for. The nine hues above are spoken for, so these two
take the brand's own rather than inventing a tenth and eleventh.
--sage is documented above as the calm token, which is the one
that fits meditation; --text-light is deliberately the quietest
thing here, for a badge whose real words are the organiser's. */
--type-yoga: var(--sage);
--type-other: var(--text-light);
}
/* Type classes: set the shared accent variable --c, which the .tag,
.card-accent, and .type-pill rules already consume — and --ink,
the share of that colour used when it is written as TEXT rather
than painted as a fill (see --type-ink above). A tag with no type
sets neither, so it keeps its own colour at full strength. */
.t-festival { --c: var(--type-festival); --ink: var(--type-ink, 100%); }
.t-retreat { --c: var(--type-retreat); --ink: var(--type-ink, 100%); }
.t-workshop { --c: var(--type-workshop); --ink: var(--type-ink, 100%); }
.t-kirtan { --c: var(--type-kirtan); --ink: var(--type-ink, 100%); }
.t-course { --c: var(--type-course); --ink: var(--type-ink, 100%); }
.t-temple { --c: var(--type-temple); --ink: var(--type-ink, 100%); }
.t-satsang { --c: var(--type-satsang); --ink: var(--type-ink, 100%); }
.t-pilgrimage { --c: var(--type-pilgrimage); --ink: var(--type-ink, 100%); }
.t-online { --c: var(--type-online); --ink: var(--type-ink, 100%); }
.t-yoga { --c: var(--type-yoga); --ink: var(--type-ink, 100%); }
.t-other { --c: var(--type-other); --ink: var(--type-ink, 100%); }
/* A tag coloured from the data rather than from a gathering type —
a resource kind, a calendar kind, a facilitator's speciality. Those
colours arrive as literals from app.jsx, so they cannot be themed,
and raw they read between 2.1 and 4.3:1 in daylight and between
2.2 and 4.3:1 at night. Half of the colour and half of --text-dark
carries the worst of them past 4.6:1 in BOTH appearances, because
that token is the deep brown by day and the ivory by night — one
share, no theming needed (F69, 8 Sep 2026). */
.tag--ink { --ink: var(--ink-data); }
/* ── 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(--page);
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(--page-soft); }
::-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 beeFloat{ 0%,100%{transform:translateY(0) rotate(-3deg);} 40%{transform:translateY(-4px) rotate(3deg);} 70%{transform:translateY(-1px) 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 softGlow{ 0%,100%{opacity:.25;} 50%{opacity:.6;} }
@keyframes pulse{ 0%,100%{opacity:1;} 50%{opacity:.5;} }
.fade-in { animation: fadeIn .9s ease; }
/* Motion respects the visitor's preference, everywhere at once.
Four scattered blocks used to still four animations while the
hero's shimmer, the globe's blooms and glow, the fade-ups and the
button lifts carried on — and the app's own comment claimed
"prefers-reduced-motion stills every animation in CSS". Now it
does: every animation and transition collapses to an instant, so
each element lands straight on its final state (the hero stack
still appears; the skeletons still fade, only at once) and nothing
drifts, breathes or shimmers. Scrolling stops being smooth for the
same reader; app.jsx picks the same answer for its own scrollTo
calls (SCROLL_BEHAVIOR). The per-rule blocks below stay: harmless,
and each carries the story of why it was written. (7 Sep 2026) */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
scroll-behavior: auto !important;
}
}
/* ── 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 {
/* The ring is --honey-text, not --honey: raw honey on cream reads
2:1, under the 3:1 a focus indicator needs against what surrounds
it. At night the token is the bright honey and reads 9:1. */
outline: 2px solid var(--honey-text); 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--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--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(--page); }
/* 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-560 { max-width: min(100%, var(--w-narrow)); }
.mw-780 { max-width: min(100%, var(--w-read)); }
.mw-840 { max-width: min(100%, clamp(840px, 56vw, 940px)); }
.mw-960 { 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; }
/* 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(--page); }
.section-philosophy { padding: var(--section-pad-y) var(--page-pad-x); position: relative; overflow: hidden; }
/* No background of its own any more. Its only home is the About page,
whose sections alternate petal and warm white; carrying petal with it
put two petal bands side by side and they read as one long block. */
.section-bhakti { padding: var(--section-pad-y) var(--page-pad-x); background: var(--page); 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-support { padding: var(--section-pad-y) var(--page-pad-x); background: var(--page-soft); position: relative; overflow: hidden; }
/* 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 */
.heart-divider { display: flex; align-items: center; gap: 12px; margin: 14px 0 12px; }
.heart-divider-line { width: 56px; height: 1px; background: #E8C06050; }
/* ── 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-text); }
/* The link row breathes as the header widens rather than staying a
fixed cluster pinned to the right edge. The uppercase, widely
spaced labels (14 Sep 2026) need ~50px more than the old ones, so
below 1680px the gap closes faster, down to 10px at 1200px where
the burger takes over; wider than that it is 1.5vw as before. */
.nav-links { display: flex; align-items: center; gap: clamp(10px, min(4vw - 42px, 1.5vw), 34px); }
/* Nav text links */
.nl { color: var(--text-mid); text-decoration: none; font-family: var(--font-nav); font-size: 11.5px; font-weight: 500; font-style: normal; text-transform: uppercase; letter-spacing: .22em; line-height: 1.75; white-space: nowrap; 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: var(--on-accent);
}
.nav-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 20px #D4A14155; }
/* Mobile hamburger */
.nav-burger { background: none; border: none; cursor: pointer; padding: 8px; display: flex; flex-direction: row; align-items: center; gap: 10px; min-height: 44px; box-sizing: border-box; }
/* "Menu" beside the bars: the label style of timacamara.com's menu
and language switcher (F124) — a step heavier and a little tighter
than the links it opens onto. */
.nav-burger-label {
font-family: var(--font-nav); font-size: 11px; font-weight: 600; font-style: normal;
text-transform: uppercase; letter-spacing: .16em; line-height: 1;
color: var(--deep-earth);
}
.nav-burger-bars { display: flex; flex-direction: column; gap: 5px; }
.nav-burger-bar { display: block; 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: var(--on-dark);
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: a drawer from the right, under the header, over a
dimmed page. It stays in the DOM and slides both ways on the
.is-open class (a transform, so the page is never re-laid-out),
and the visibility switch is delayed on the way out so the drawer
finishes leaving before it stops being rendered. No new colours:
the scrim is the site's brown at low alpha, the panel the footer's
and verse section's earth gradient (the founder chose the dark one
over the cream, 2 Sep 2026), the text cream, and the current page
the same gold the honey gradient already carries. */
.mobile-menu-scrim {
position: fixed; top: 64px; left: 0; right: 0; bottom: 0; z-index: 185;
background: #5B3E1F66;
opacity: 0; visibility: hidden;
transition: opacity .3s ease, visibility 0s linear .3s;
}
.mobile-menu-scrim.is-open { opacity: 1; visibility: visible; transition: opacity .5s ease, visibility 0s; }
.mobile-menu {
position: fixed; top: 64px; right: 0; bottom: 0; z-index: 190;
width: min(86vw, 360px);
background: var(--grad-earth); color: var(--cream);
border-left: 1px solid #D4A14140;
box-shadow: -18px 0 48px #23120455;
display: flex; flex-direction: column; align-items: stretch;
padding: 14px 0 max(20px, env(safe-area-inset-bottom));
overflow-y: auto; overscroll-behavior: contain;
transform: translateX(100%); visibility: hidden;
/* Two paces (2 Sep 2026, the founder found the first "too quick"):
it arrives in half a second on a long, soft ease-out, and leaves
in .3s — an opening is something to watch, a closing is something
to be done with. The transition a state change uses is the one
declared on the state it is going TO, so the opening pace sits on
.is-open and the closing pace here. */
transition: transform .3s cubic-bezier(.4, 0, .6, 1), visibility 0s linear .3s;
}
.mobile-menu.is-open { transform: none; visibility: visible; transition: transform .5s cubic-bezier(.22, .8, .26, 1), visibility 0s; }
/* The honeycomb behind the top of the drawer: the same HexBg the hero
uses, at 7%, masked away between a third and two thirds of the way
down so the CTA and the account foot sit on plain earth. The rows
are lifted above it. */
.mobile-menu > .hex-bg {
-webkit-mask-image: linear-gradient(180deg, #000 0%, #000 30%, transparent 62%);
mask-image: linear-gradient(180deg, #000 0%, #000 30%, transparent 62%);
}
.mobile-menu > :not(.hex-bg) { position: relative; z-index: 1; }
/* Each row settles in a beat after the one above it, using the
fadeUp the rest of the site already has; --i is set on the row. */
.mobile-menu.is-open > :not(.hex-bg) {
animation: fadeUp .6s cubic-bezier(.2, .7, .2, 1) both;
animation-delay: calc(100ms + var(--i, 0) * 50ms);
}
.mobile-menu-link {
display: flex; align-items: center; width: 100%; min-height: 52px; box-sizing: border-box;
background: none; border: none; border-left: 3px solid transparent; cursor: pointer;
text-align: left; color: var(--cream); padding: 12px 24px 12px 25px;
/* The desktop row's type on the phone too (founder, 14 Sep 2026 —
F124): small, uppercase, widely spaced. The row keeps its 52px
height, so the tap target does not shrink with the letters. */
font-family: var(--font-nav); font-size: 11.5px; font-weight: 500; font-style: normal;
text-transform: uppercase; letter-spacing: .22em; line-height: 1.75;
transition: background .15s ease, color .15s ease;
}
.mobile-menu-link:active { background: #FBF6EE1A; }
.mobile-menu-link.on { color: var(--gold); border-left-color: var(--gold); background: #FBF6EE12; }
/* Account group at the foot of the drawer: avatar + name, then the
account actions — one place, like any profile menu */
.mobile-menu-account {
margin-top: auto; padding-top: 12px; border-top: 1px solid #FBF6EE22;
display: flex; flex-direction: column; align-items: stretch; 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: #F5EFE699; padding: 8px 24px 6px 28px;
}
.mobile-menu-link--account { min-height: 48px; padding: 10px 24px 10px 25px; color: #F5EFE6CC; }
.mobile-menu-link--signout {
color: #F5EFE699; min-height: 48px; padding: 10px 24px 10px 25px;
}
.mobile-menu-cta {
margin: 18px 24px 10px;
background: var(--grad-honey);
color: var(--on-accent); border: none; cursor: pointer;
font-family: var(--font-sans);
font-size: 15px; font-weight: 600; letter-spacing: .04em;
min-height: 48px; padding: 13px 24px; border-radius: 50px;
box-shadow: 0 4px 18px #D4A14145;
display: flex; align-items: center; justify-content: center; gap: 10px;
}
@media (prefers-reduced-motion: reduce) {
.mobile-menu, .mobile-menu-scrim { transition: none; }
.mobile-menu.is-open > :not(.hex-bg) { animation: none; }
}
/* 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 */
/* ── Home hero ────────────────────────────────────────────────── */
.hero {
min-height: 100svh;
background: linear-gradient(180deg, var(--page-cream) 0%, var(--page-soft) 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 sits on a single line from 1000px up (it wraps below that —
see the phone block at the end of this file). The size is solved
backwards from the line: the limit is the column the headline sits
in, not the viewport, so the column is spelled out here exactly as
.hero-stack computes it and the font size is simply that width
divided by the string's own width in ems. Montserrat sets "Find
Bhakti gatherings around the world" at 20.2× the font size; 21
leaves room for the rounding, the scrollbar 100vw does not know
about, and a fallback face a little wider than Montserrat.
Rises to a 62px ceiling as the column grows. */
.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(62px, calc(min(100vw - 2 * clamp(20px, 4vw, 72px), max(960px, 68vw)) / 21));
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); }
/* Social proof under the stats (F32): one centred line, quieter and
smaller than the counters above it — existing tokens only, no box.
The padding keeps its wrap clean at 360px.
Honey, not grey (founder, 25 Aug 2026): between the counters and
the welcome sentence the line read as one more strip of body text.
It now wears the digits' own colour family — --honey-text, the
dark honey minted for text this small, because the counters' raw
--honey fails contrast below headline sizes — and the 600 weight
the other small honey lines carry. */
.hero-social-proof {
margin: clamp(12px, 1.4vw, 20px) auto 0; padding: 0 12px;
text-align: center; font-family: var(--font-sans);
font-size: clamp(12px, 0.3vw + 11.3px, 14px);
color: var(--honey-text, var(--honey)); font-weight: 600;
letter-spacing: .03em; line-height: 1.5;
}
/* On a phone the hero stacks tight and the line sat crunched between
the stats and the welcome (founder, same day): more air above and
a little below, so it reads as its own quiet beat. */
@media (max-width: 768px) {
.hero-social-proof { margin: 22px auto 6px; }
}
/* Hero search bar */
/* 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;
}
/* 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-text); 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); }
/* ── 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; text-decoration: none; }
.bg-g { background: var(--grad-honey); color: var(--on-accent); padding: 12px 28px; box-shadow: 0 4px 18px #D4A14145; }
.bg-g:hover { transform: translateY(-2px); box-shadow: 0 8px 28px #D4A14160; }
/* The press. Hover lifts a button, but a thumb never hovers: on a
phone the only feedback was the page changing. A touch now settles
the button a hair while it is held, the same on every .bg, so the
tap is acknowledged before the answer arrives. (7 Sep 2026) */
.bg:active { transform: translateY(0) scale(.98); transition-duration: .08s; }
.bg-o { background: transparent; color: var(--honey); border: 1.5px solid var(--honey); padding: 11px 26px; }
.bg-o:hover { background: var(--honey); color: var(--on-accent-strong); }
.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; }
/* Filter pill button */
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; }
/* The count inside "Show more gatherings" — quieter than the label it
follows, since it is the detail and not the action. */
.btn-count {
margin-left: 10px; padding-left: 10px;
border-left: 1px solid currentColor;
opacity: .7; font-weight: 400; font-variant-numeric: tabular-nums;
}
/* ── 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);
/* Text falls back to --honey-text, not --honey: at 11px raw honey
on cream reads at 2:1 ("1 upcoming" on the facilitator cards).
The tint and border above keep the founder's colour; only the
LETTERS darken, and only for a tag that carries a type — --ink
is unset otherwise, so the share is 100% and nothing moves.
(7 Sep 2026, F69) */
color: color-mix(in srgb, var(--c, var(--honey-text)) var(--ink, 100%), var(--text-dark));
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);
}
/* 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: var(--surface); 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; }
/* 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; }
/* min-width: 0 lets the tag cluster give way first when the top row
is tight — it wraps onto another line, which is what it is built
to do — instead of squeezing the place beside it (F75). */
.card-tags { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; min-width: 0; }
/* The place sits at the right of the card's top row, opposite the
type tags. Since it names the CITY (F75) it can be long — one
gathering's city field holds three of them — and the row is a
nowrap flex, so before this a long one ran 135px past the edge of
its own card. The words now truncate; the flag never does, because
it is the flag that carries the country. */
.card-loc {
font-size: 12px; color: var(--text-light); font-style: normal;
display: inline-flex; align-items: baseline; min-width: 0;
/* It keeps its natural width up to seven tenths of the row. Every
real city fits inside that; the one field holding three of them
is truncated rather than allowed off the card. */
max-width: 70%;
}
.card-place { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
/* The flag beside the place, and the globe where there is no place to
name (F74, 8 Sep 2026). The founder asked for warmth and quick
context "without making the cards feel busy", so it is a shade
smaller than the words it follows, a little desaturated and a
little transparent — present at a glance, quiet on a second look.
line-height is pinned because an emoji is a tall glyph and would
otherwise push the row it sits in. No font is named: the browser
reaches for the system emoji face on its own, and naming one would
be a typeface this palette has not got. */
.card-flag {
/* .95em first, then a little bigger at the founder's ask (8 Sep
2026). 1.15em is still under the size a badge would be, and the
pinned line-height keeps a taller glyph from pushing its row. */
margin-left: .35em; font-size: 1.15em; line-height: 1; flex: none;
opacity: .85; filter: saturate(.85);
}
.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; }
/* A row, so the date can hold the left and the suitability badge can
be pushed to the right edge — the same edge the country sits on in
.card-top above (that row is space-between, and both share the
card's padding, so the two right edges line up exactly). The
row-gap is what gives the badge air on a narrow card, where the
date is too long to leave room and the badge takes its own line. */
.card-date {
font-size: 13px; color: var(--honey); font-weight: 600;
display: flex; flex-wrap: wrap; align-items: center; gap: 7px 10px;
}
.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 */
/* 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: var(--surface); 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; }
/* The three cards' tints are literals in app.jsx — the fly's dusk,
the bee's honey, the bhakta's ember — so each one fails in one
appearance or the other: dusk reads 6.6:1 by day and 2.2:1 at
night. They take --ink-data like every other colour that comes
from the data (F69, 8 Sep 2026). */
.value-title { font-family: var(--font-serif); font-size: 22px; font-weight: 600; color: color-mix(in srgb, var(--c, var(--honey)) var(--ink-data), var(--text-dark)); 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; }
/* background-COLOR, not the `background` shorthand. The shorthand
resets every background-* longhand it does not mention, and one of
those is background-clip — which the phone block sets to
content-box so the 8px dot keeps its size while 18px of padding
around it takes the tap (rule 8).
So on a phone the ACTIVE dot, and only the active dot, painted its
honey across the whole 44x44 padding box: a gold square the size of
a button under the verse, with four small marks beside it. Reported
by the founder on 8 Sep 2026 from their own phone. Desktop was
fine, because without that padding the border box and the content
box are the same 8 by 8. */
.verse-dot.on { width: 26px; background-color: var(--honey); }
/* ── Our Roots ────────────────────────────────────────────────
The homepage's one quiet breath about where this bhakti comes
from: a heading, two sentences and a single door. Deliberately
lighter than the sections either side of it — no cards, no grid,
no artwork of its own — so the roots become visible without
becoming the loudest thing on the page. Beeswax cream, the same
warm ground the newsletter and philosophy bands already use.
The portrait is optional (PRABHUPADA_PORTRAIT in app.jsx). With
no photograph the copy simply centres itself and the section is
complete; with one, the two sit side by side and the copy aligns
left beside it. Nothing here needs changing when a portrait
arrives, and nothing reserves space for one that never does. */
/* A grid rather than a wrapping flex row: flex would have decided
for itself, at a width that moves with the copy, when the portrait
drops above the text — and it dropped it centred over a paragraph
that was still aligned left. The switch is made here instead, once,
at a width the whole layout agrees on. */
.roots-card {
position: relative; z-index: 1;
display: grid; gap: clamp(20px, 2.6vw, 48px);
justify-items: center; text-align: center;
}
@media (min-width: 760px) {
.roots-card:has(> .roots-portrait) {
grid-template-columns: auto minmax(0, 1fr);
align-items: center; justify-items: start; text-align: left;
}
}
.roots-portrait {
width: clamp(132px, 13vw, 200px); aspect-ratio: 1; height: auto;
border-radius: 50%; object-fit: cover;
border: 3px solid #E8C06055; box-shadow: 0 10px 34px #5B3E1F14;
}
/* A readable measure whichever way it lands: never wider than the
prose it holds, never so narrow that two sentences become six
lines on a large display. */
.roots-text { max-width: 62ch; text-align: inherit; }
.roots-prose { margin-bottom: clamp(20px, 2vw, 32px); text-align: inherit; }
.roots-cta { text-decoration: none; }
/* Seva / support section */
.seva { padding: 80px var(--page-pad-x); background: linear-gradient(160deg, var(--page-soft), var(--page)); 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; }
/* "write to us first" (F115): the one link in the band, in the site's
link colour, so somebody who is not listed can reach the address and
the list of what to send without hunting for it. */
.seva-write {
color: var(--honey-text, var(--honey)); font-weight: 600;
text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.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: var(--surface); 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: var(--on-dark); }
.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: var(--on-dark); }
.tier-sub { font-size: 12px; color: var(--text-light); }
.seva--dark .tier-sub { color: #F5EFE645; }
.tier--highlight .tier-sub { color: color-mix(in srgb, var(--surface) 70.00%, transparent); }
/* Seva CTA + thank-you state */
.seva-cta {
background: var(--grad-honey);
color: var(--on-accent); 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(--page-soft);
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(--page-soft); 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: var(--surface); 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-tier { font-size: 12px; letter-spacing: .18em; color: var(--honey); margin-bottom: 10px; }
.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-price-note { font-size: 12px; white-space: nowrap; color: var(--text-light); margin-bottom: 6px; }
/* 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-star { color: var(--honey); font-size: 14px; line-height: 1.5; }
.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: var(--surface); 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(--page-soft); 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: var(--page-soft); padding: 10px; }
/* Portrait artwork (book covers, posters, square podcast art) gets a
squarer frame, so a tall cover fills it instead of floating in a
wide letterbox that read as broken. */
.res-img-wrap--tall { aspect-ratio: 5 / 4; }
/* 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: var(--on-accent); }
.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. */
/* ── 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%, color-mix(in srgb, var(--surface) 45.10%, transparent) 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"; }
/* Event Facilitators gives the search its own row: on the desktop it
sits exactly where it always has, over the results and beside the
rail; stacked on a phone it can then come FIRST, above the A–Z row
(see the narrow-screen block below). Searching by name is the
primary action here — the letters are the fallback. */
.rail-layout--guides { grid-template-areas: "rail head" "rail search" "rail content"; }
.guide-search-area { grid-area: search; min-width: 0; position: relative; z-index: 1; }
/* The search box kept the bottom margin it needed as the first thing
inside the results column. In its own grid row that margin ADDS to
the layout's row-gap instead of being the gap (grid items do not
collapse margins), which pushed the field to 56px clear of the list
at 1280 and 82px at 1920 — far enough that it read as belonging to
the paragraph above rather than to the results it filters. The row
gap is the spacing now. */
.guide-search-area .search-wrap { margin-bottom: 0; }
/* 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 rows permanently out of reach — so it scrolls
within itself instead. Only here: at normal heights these rails fit,
and letting them overflow keeps any dropdown free to open past the
rail's bottom edge.
The Gatherings rail is excluded because it runs its own scroll box
at every height (see "The Filters bar"): its Filters bar has to stay
put while the filters travel under it, which it cannot do if the
whole rail is what scrolls. */
@media (min-width: 1000px) and (max-height: 780px) {
.rail:not(.rail--filters) {
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 (Event Facilitators) ───────────────────────────
A compact grid, not a 26-row column: every letter stays visible
without scrolling. Deliberately quiet — 26 bordered white tiles
read as the loudest thing in the column, competing with the
search bar that is the page's primary action. The letters keep
their footprint but drop their boxes: type on the wax, with only
the chosen one wearing honey. */
.rail--alpha { display: flex; flex-direction: column; gap: 10px; }
.alpha-all {
display: flex; align-items: center; gap: 6px;
/* 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: 9px 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: color-mix(in srgb, var(--surface) 47.84%, transparent); color: var(--deep-earth); }
.alpha-all.on { color: var(--honey-text, var(--honey)); font-weight: 600; }
/* The count reads as part of the label — "All (41)" — rather than a
badge pinned to the far edge, which is what made this row look
like a heavier control than it is. */
.alpha-count { font-size: 13px; font-weight: 500; color: var(--text-light); }
.alpha-all.on .alpha-count { color: var(--honey-text, var(--honey)); }
.alpha-grid {
display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px;
}
/* A touch screen wider than the phone breakpoint — an iPad in portrait
is 1024px and gets this desktop grid — still has a thumb on it. The
44px rule below 1000px does nothing for those, so give the cells a
real height wherever the pointer is coarse. */
@media (pointer: coarse) {
.alpha-btn { aspect-ratio: auto; min-height: 44px; }
}
.alpha-btn {
aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center;
background: none; border: 1px solid transparent; border-radius: 8px;
font-family: var(--font-sans); font-size: 13px; font-weight: 500;
color: var(--text-mid); cursor: pointer;
transition: background .18s ease, color .18s ease;
}
.alpha-btn:hover:not(:disabled) { background: color-mix(in srgb, var(--surface) 76.86%, transparent); color: var(--deep-earth); }
.alpha-btn.on {
background: var(--honey); color: var(--on-accent-strong); font-weight: 600;
box-shadow: 0 1px 4px #5B3E1F1F;
}
/* 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: none; color: var(--text-light); opacity: .32; 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: color-mix(in srgb, var(--surface) 47.84%, transparent); 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: color-mix(in srgb, var(--surface) 94.90%, transparent); 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; }
/* A quiet qualifier under a page's introduction — smaller and
dimmer than the subtitle, because it is a clarification rather
than part of the welcome. */
.page-head-note {
/* No measure cap. The note is one sentence meant to sit on ONE
line on a desktop — it needs about 722px, and a 72ch cap held
it to 667 and folded it in two at every width. Left to fit
naturally rather than forced with white-space: nowrap, which
would overflow the page on the frame before Montserrat loads
and the wider fallback is still measuring it. Below roughly
790px of column it wraps, which is tablet and phone. */
margin: clamp(10px, 1vw, 16px) 0 0;
/* Flat 13px, not a clamp up to 14: beside the rail the column is
only about two thirds of the viewport, so at 14px the sentence
needed 722px and still folded on a 1024-wide laptop. At 13px it
needs 670 and clears every width where the rail is present. */
font-size: 13px; line-height: 1.65;
/* No opacity dimming: at this size it would drop the note to
3.95:1, under AA. It is already secondary by size and position,
which is enough. */
color: var(--text-light); text-align: left;
font-family: var(--font-sans);
}
.page-head--center .page-head-note { text-align: center; margin-inline: auto; }
.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: var(--surface); border: 1px solid #E8C06035;
border-radius: 50px; padding: 9px 16px;
}
.rail--nav .rail-item.on { border-color: var(--honey); }
/* ── Resources on a phone (founder, 11 Sep 2026 — F110, F111) ──
Every section in view. The strip ran ten pills off the side of
the screen (two visible, the current one often hidden); F110 put
them behind one button, which did not read as a menu. Now the
chips wrap onto a few short lines, nothing to open and nothing
hidden, and the one you are in is filled with honey. Icons and
counts step aside here so the ten fit in about four short lines;
the names are what you choose by. 44px tall (rule 8). Same
tokens; no new colour. */
.rail--nav.rail--wrap { flex-wrap: wrap; overflow: visible; gap: 6px; padding: 0; }
.rail--wrap .rail-item {
min-height: 44px; padding: 7px 12px; gap: 0;
font-size: 13px; line-height: 1.2;
}
.rail--wrap .rail-ic, .rail--wrap .rail-count { display: none; }
.rail--wrap .rail-item.on {
background: color-mix(in srgb, var(--honey) 32%, var(--surface));
border-color: var(--honey); color: var(--deep-earth); box-shadow: none;
}
/* Search first, then browse: on a phone the name search is what
the page is for, and a grid of 26 letters above it buries the
one control most people want. */
.rail-layout--guides { grid-template-areas: "head" "search" "rail" "content"; }
/* Stacked, the A–Z index is ONE compact row that scrolls sideways
rather than a block three rows deep — the letters keep their
place in a single line the thumb can sweep, and the facilitators
themselves start within the first screen. */
.rail--alpha { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; }
.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: var(--surface); border-radius: 50px;
padding: 9px 16px;
}
.alpha-all.on { border-color: var(--honey); }
/* Two shallow rows of thirteen — every letter on screen, none of
them behind a gesture.
This was one sideways-scrolling row for half a day, and it was a
mistake: past about H the letters sat off-screen, and reaching
them meant landing a horizontal swipe on a 44px strip that the
page's vertical scroll (or Safari's back-swipe, at scrollLeft 0)
takes just as readily. The founder could not get to the later
letters at all. An index whose whole job is "jump to S" cannot
put S behind a gesture that competes with two others, so the
letters come back on screen — still one compact block, still
light, just no longer scrolling. */
.alpha-grid {
flex: 1 1 100%;
/* As many columns as fit at a thumb-sized width — about nine on a
360px phone, so the block is three shallow rows. Thirteen
across would fit in two, but at 22px a letter is narrower than
the accessible minimum and its neighbours are 3px away. */
grid-template-columns: repeat(auto-fill, minmax(30px, 1fr));
gap: 3px;
}
.alpha-btn { aspect-ratio: auto; height: 44px; font-size: 13px; }
}
@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; }
/* ── The Śrīla Prabhupāda page ────────────────────────────────
/resources/srila-prabhupada/ — a Resources category whose content
is a page about a person, so it opens with a real page title and
then reads as plain sections rather than a grid of cards. It uses
the rail column's full width (the intro paragraphs cap themselves
at a readable measure) so a large display is not left with a thin
ribbon of text beside an empty rail. */
.roots-page-intro {
display: flex; align-items: flex-start; gap: clamp(20px, 2.6vw, 48px);
flex-wrap: wrap; margin: clamp(22px, 2.2vw, 40px) 0 0;
}
.roots-page-intro > div { flex: 1 1 clamp(300px, 40vw, 640px); max-width: 72ch; }
.roots-page-intro .prose:last-child { margin-bottom: 0; }
/* Beside the running text the portrait steps down a size — the page
is an introduction, not a memorial wall */
.roots-portrait--page { width: clamp(120px, 11vw, 176px); }
.roots-sec { margin-top: clamp(38px, 3.6vw, 68px); }
.roots-sec .prose { max-width: 72ch; }
/* The subheading is shared with the Sacred Texts tab, where it is a
centred h3; here it opens a section of a page, so it aligns with
the column like everything else in the rail (see the
.rail-content rule that already does this for the whole column). */
.roots-sec .res-subheading { margin-bottom: clamp(10px, 1vw, 16px); }
/* A link standing alone is not a full-width pill; it keeps
the height of every other pill on the site so it stays easy to tap */
.roots-sec > .pill-link {
display: inline-flex; align-items: center; justify-content: center;
width: auto; padding-inline: clamp(22px, 2vw, 34px);
}
/* Sacred text cards */
.text-card { container-type: inline-size; background: var(--page-soft); 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: var(--surface); 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(--hover); }
.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: color-mix(in srgb, var(--hover) 50.20%, transparent); }
/* --guide-av is set on .guide-list; the event page shows the same
portrait outside that container, so both carry the 52px default
the list starts from — without it the picture fell back to its
natural size and pushed the card around as it loaded. */
.guide-photo {
width: var(--guide-av, 52px); height: var(--guide-av, 52px);
border-radius: 50%; flex-shrink: 0;
/* Portraits are square and cropped to fill, never squashed */
object-fit: cover; object-position: center;
border: 2px solid #D4A14150;
/* A neutral ground while the picture is still on its way, so
the circle is never a bright empty hole */
background: var(--photo-ph);
}
.guide-avatar {
width: var(--guide-av, 52px); height: var(--guide-av, 52px); 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; }
/* The badge's place, for a facilitator BeeBhakti has nothing listed
for. It is a note, not a label: the same quiet weight and colour as
the country line under the name, never a chip, so it reads as an
absence rather than as a second thing to look at. It is also the one
thing in the row that may wrap, so the side is allowed to give width
back to the name instead of squeezing it. */
.guide-side:has(.guide-none) { flex-shrink: 1; min-width: 0; }
.guide-none {
font-size: 12px; line-height: 1.35; color: var(--text-light);
text-align: right; text-wrap: balance; opacity: .85;
max-width: 15em; min-width: 0;
}
/* On a phone the row has no width to spare. Left at its desktop
measure this note took 190px of a 360px row and squeezed the name
column to nothing — the opposite of not competing with the name. So
it narrows to about the width the "N upcoming" badge occupies and
takes another line or two instead, which costs height nobody is
short of and keeps the name whole. */
@media (max-width: 599.98px) {
.guide-none { max-width: 8.5em; font-size: 11.5px; }
}
/* The newest "What's new" item, in the same place when nothing is
upcoming (F95, 11 Sep 2026). Two short lines at the note's measure,
right-aligned like it: the kind in the honey the profile's links
use, the title beneath at most two lines, so a long one can never
make the row taller than the portrait. Its own link, above the
row's stretched profile link, with a 44px tap height. */
.guide-side:has(.guide-update) { flex-shrink: 1; min-width: 0; }
.guide-update {
position: relative; z-index: 2;
display: flex; flex-direction: column; justify-content: center;
min-height: 44px; min-width: 44px;
/* The note's own measure: 12px × 15em, and 11.5px × 8.5em on a
phone, so the name column keeps exactly the width it had. */
font-size: 12px; max-width: 15em;
text-align: right; color: inherit; text-decoration: none;
}
.guide-update-kind {
font-size: 11px; font-weight: 700; letter-spacing: .04em; line-height: 1.3;
color: var(--honey-text);
}
.guide-update-title {
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
font-size: 13px; font-weight: 600; line-height: 1.35; color: var(--text-mid);
overflow-wrap: anywhere;
}
.guide-update:hover .guide-update-title { color: var(--honey-text); }
@media (max-width: 599.98px) {
.guide-update { max-width: 8.5em; font-size: 11.5px; }
.guide-update-title { font-size: 12px; }
}
.guide-chevron { font-size: 18px; color: var(--text-light); transition: transform .25s; transform: rotate(0deg); }
.guide-item.is-open .guide-chevron { transform: rotate(180deg); }
/* 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); }
.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; }
/* 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: none; flex-direction: column; gap: clamp(18px, 1.7vw, 30px); align-items: flex-start; }
.filter-panel.is-open { display: flex; }
.filter-group { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.filter-pills { display: flex; flex-wrap: wrap; gap: 8px; }
/* The panel's own heading would repeat the word the bar above it
already says, so the bar is the heading and this steps aside. It
stays in the markup for screen readers reaching the panel directly. */
.filter-panel .rail-label { display: none; }
/* ── The Filters bar ──────────────────────────────────────────
One control on every viewport, because it is one idea: fold the
filters away, get the width (or the screen) back. The whole bar
is the button — sliders on the left so it reads as filtering at a
glance, the count of what is still narrowing the list in the
middle, and a chevron on the right pointing the way it will move.
Nothing it hides is cleared: the panel is only out of sight. */
.filter-toggle {
display: flex; align-items: center; gap: 9px;
width: 100%; min-height: 44px; padding: 10px 13px;
border-radius: 12px; border: 1px solid #E8C06040;
background: color-mix(in srgb, var(--surface) 65.88%, transparent);
font-family: var(--font-sans); font-size: 13px; font-weight: 600;
letter-spacing: .04em; color: var(--deep-earth); cursor: pointer;
transition: border-color .2s, background .2s, box-shadow .2s;
}
.filter-toggle:hover { border-color: var(--honey); background: var(--surface); }
.filter-toggle .ic { display: block; }
.filter-toggle-ic { display: inline-flex; flex-shrink: 0; }
.filter-toggle-label { flex: 1 1 auto; text-align: left; }
.filter-toggle-chev {
display: inline-flex; flex-shrink: 0; margin-left: auto;
transition: transform .25s ease;
}
/* Desktop: the bar heads a sidebar it can fold to a narrow handle */
@media (min-width: 1000px) {
/* The rail takes its own height so the bar stays put at the top and
the filters scroll under it. Only when there are more filters
than the window is tall does a scrollbar appear at all — the last
group is never stranded below the fold on a short laptop. */
.rail--filters {
display: flex; flex-direction: column;
max-height: calc(100svh - 104px);
}
.rail--filters .filter-panel {
min-height: 0; overflow-y: auto; overscroll-behavior: contain;
width: 100%; padding: 15px 10px 4px 0; margin-top: 11px;
/* The hairline belongs to the scroll box, so it holds its place
while the filters travel under it — the bar stays a bar, and a
group half in view reads as more to come rather than as a
group that got cut. */
border-top: 1px solid #E8C06033;
scrollbar-width: thin; scrollbar-color: #D4A14159 transparent;
}
.rail--filters .filter-panel::-webkit-scrollbar { width: 8px; }
.rail--filters .filter-panel::-webkit-scrollbar-track { background: transparent; }
.rail--filters .filter-panel::-webkit-scrollbar-thumb {
background: #D4A14140; border-radius: 50px;
}
.rail--filters .filter-panel:hover::-webkit-scrollbar-thumb { background: #D4A1416B; }
/* Open, the chevron points back at the column it would fold into;
shut, it points out at the width it would take back. */
.filter-toggle-chev { transform: rotate(-90deg); }
.filter-toggle.is-open .filter-toggle-chev { transform: rotate(90deg); }
/* Folded: the column narrows to the handle, and the map and the
results grow into everything it gives up. The bar stands up
rather than shrinking to a mystery icon — the same word, turned
on its side, so what the handle opens is never in doubt at 56px
wide. Under it the count of what is still narrowing the list. */
.rail-layout--wide.rail-layout--collapsed { --rail-w: 56px; }
.rail-layout--collapsed .filter-toggle {
flex-direction: column; justify-content: flex-start;
gap: 12px; padding: 14px 4px 12px; margin-top: 2px;
}
.rail-layout--collapsed .filter-toggle-label {
flex: 0 0 auto;
writing-mode: vertical-rl; transform: rotate(180deg);
letter-spacing: .16em; text-transform: uppercase; font-size: 11px;
}
.rail-layout--collapsed .filter-toggle-chev { margin-left: 0; }
}
/* The column resizes rather than jumping when the sidebar folds */
.rail-layout { transition: grid-template-columns .3s ease; }
@media (prefers-reduced-motion: reduce) {
.rail-layout, .filter-toggle-chev { transition: none; }
}
/* The map folds away while the Online format filter is active
(online gatherings have no place on a map): a 1fr→0fr grid row
animates the height smoothly, no max-height guesswork, and the
fade keeps the fold from feeling abrupt. */
.map-reveal {
display: grid; grid-template-rows: 1fr; opacity: 1;
transition: grid-template-rows .45s ease, opacity .35s ease;
}
.map-reveal-inner { overflow: hidden; min-height: 0; }
.map-reveal--off {
grid-template-rows: 0fr; opacity: 0; pointer-events: none;
}
.map-panel { background: linear-gradient(180deg, var(--page-soft) 0%, var(--page) 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: var(--surface); }
.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: var(--surface); 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(--hover); }
/* The share form's roster: tall enough to browse, about seven rows (F89). */
.combo-list--roster { max-height: 300px; }
.combo-option.on { color: var(--honey); font-weight: 600; }
/* "Facilitator not listed", always the last row. A hairline above it
separates the way OUT of the list from the names in it, so it does
not read as one more facilitator called "not listed". Reuses the
existing line and text tokens; no new colour. Added 24 Aug 2026. */
/* 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 */
/* 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; }
/* Interactive 3D globe: same footprint as the static artwork, square
so the WebGL canvas always matches its container */
/* The live globe fades in over the artwork instead of snapping */
@keyframes globeIn{ from { opacity: 0; } to { opacity: 1; } }
/* 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. */
/* 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. */
/* Hover tooltip over a gathering's lotus */
/* 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; }
/* 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-count {
font-family: var(--font-mono);
background: var(--page-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: var(--on-accent-strong); 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: var(--surface); color: var(--text-mid); box-shadow: inset 0 0 0 1.5px #D4A14135; }
.type-pill.on { background: color-mix(in srgb, var(--c, var(--honey)) var(--fill-share, 100%), var(--text-dark)); color: var(--on-accent); box-shadow: 0 2px 10px color-mix(in srgb, var(--c, var(--honey)) 31%, transparent); }
/* The count sits in a pale patch of the surface laid over the fill,
so it is dark writing on a light bubble in either appearance. */
.type-pill.on .region-count { background: color-mix(in srgb, var(--surface) 35.00%, transparent); color: var(--on-accent-strong); border: none; }
.type-pill.on .type-dot { background: var(--surface); }
/* The submission form borrows the Gatherings filter's type pills, so an
organiser picks from exactly what a visitor will filter by. One
difference: a filter is a guess you can retry in a second, a form
field is something you must hit, so here they carry the full 44px
target rule 8 asks for. Scoped to .field, which only the form uses —
the filter panel's own density is untouched. */
.field .filter-pills { gap: 10px; }
.field .filter-pills .type-pill {
min-height: 44px; padding: 10px 18px; font-size: 13px;
}
/* A field that only exists because of the answer above it — today just
the one Other opens under Gathering Type. Indented so it reads as
part of that question rather than as the next one, and given the
spacing the pills leave rather than a field's full margin, which
would put it closer to the field below than to the choice that
raised it. No new colour, no new token: the rule is margins and a
hairline in the honey the form already uses for its inputs.
Rule 8: the input inside keeps .inp, so its own 44px target and the
full-width behaviour at 360px are untouched. */
.field .field--sub {
margin: 14px 0 0; padding-left: clamp(10px, 2vw, 16px);
border-left: 2px solid #D4A14135;
}
/* 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: color-mix(in srgb, var(--type-online) var(--type-ink, 100%), var(--text-dark)); 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: var(--surface); 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; }
/* flex-shrink stays 0: the place keeps the width it needs and the
tags wrap around it. What stops a long city running off the card
is the max-width and ellipsis above, not squeezing (F75). */
.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; }
}
/* Event hub */
/* Key-facts card: the essentials, large and scannable */
/* .event-facts / .event-fact / .event-fact-icon were the gathering
page's eight icon tiles. Retired Aug 2026 — see "The gathering page,
quieted" at the end of this file. .event-fact-label survives: the
resource card in "Continue exploring" still wears it. */
.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;
}
/* .event-body was the gathering page's second two-column grid, sitting
under the intro's first one with different column widths. Retired
Aug 2026 for a single spine — see the end of this file. */
.panel { background: var(--surface); border: 1px solid #E8C06030; border-radius: 18px; padding: clamp(20px, 1.9vw, 36px) clamp(18px, 1.8vw, 34px); }
.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: var(--surface); 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(--page-soft); 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 */
/* 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. */
/* The size and line height are .prose's own since 13 Sep 2026 (founder:
the statement the same size as "The bhakti world is full of life"). */
.about-lede { font-family: var(--font-serif); font-size: clamp(17px, 0.13vw + 16.4px, 18.5px); font-weight: 400; color: var(--deep-earth); line-height: 1.85; margin: clamp(12px, 0.7vw + 6px, 22px) auto 0; max-width: min(100%, 760px); }
.about-block { margin-bottom: 52px; }
/* 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: var(--surface); 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(--field); outline: none; transition: border-color .2s; }
.inp:focus { border-color: var(--honey); }
/* .inp and .news-input each set `outline: none`, and the shared
focus rule above is written with :where(), which contributes no
specificity at all — so on a tie the later rule won and a text
field had no ring, only a border that changed colour. The guidance
is explicit that a focus indicator must not rest on colour alone.
(F69, 8 Sep 2026) */
.inp:focus-visible, .news-input:focus-visible {
outline: 2px solid var(--honey-text); outline-offset: 2px;
}
.inp--search { padding-left: 44px; font-size: 15px; }
.inp--area { resize: vertical; }
/* Submit flow */
.submit-done { min-height: 100svh; background: var(--panel); 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: var(--on-accent-strong); }
.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: var(--surface); 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; }
/* Air above as well as below (founder, 11 Sep 2026): the line sat
almost on its title, and in the F105 gateway, where the title is a