:root{
--teal:#54D8D2;
--teal-tint:#EAFBF9;
--charcoal:#15150F;
--orange:#F2C230;
--warm-white:#FAF7EF;
--mid-gray:#4B4A40;
--radius:2px;
--maxw:1200px;
}
*{box-sizing:border-box;}
body{
margin:0;
background:var(--warm-white);
color:var(--charcoal);
font-family:'Plus Jakarta Sans',sans-serif;
line-height:1.6;
}
h1,h2,h3{
font-family:'Plus Jakarta Sans',sans-serif;
font-weight:700;
line-height:1.05;
margin:0 0 0.5rem;
letter-spacing:-0.01em;
}
/* Concept 06 (Oversized Editorial) section-headline scale — bare h2 is
used sitewide for section headlines (events, directory, video library,
support, get involved, etc.), so this one rule brings all of them up
to concept 6's larger size. More specific rules (.prose-content h2,
.profile-section h2) already override this for legal-doc/profile
sub-headers, which are meant to stay compact, not oversized. */
h2{font-size:clamp(1.8rem,3vw,2.6rem);}
.voice{
font-family:'Plus Jakarta Sans',sans-serif;
font-style:italic;
color:var(--charcoal);
}
a{color:var(--charcoal);text-decoration:none;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}
.grid12{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;}
section{padding:72px 0;}
.btn{
display:inline-flex;align-items:center;gap:6px;
font-family:'Plus Jakarta Sans',sans-serif;font-weight:600;font-size:15px;
padding:12px 22px;border-radius:2px;border:2px solid transparent;
cursor:pointer;
}
.btn-primary{background:var(--charcoal);color:var(--warm-white);}
.btn-primary:hover{opacity:0.85;}
.btn-outline{background:transparent;border-color:var(--charcoal);color:var(--charcoal);}
.btn-outline:hover{background:var(--charcoal);color:var(--warm-white);}
.btn-outline-light{background:transparent;border-color:#fff;color:#fff;}
.eyebrow{
font-family:'Plus Jakarta Sans',sans-serif;font-size:13px;letter-spacing:0.04em;
color:var(--mid-gray);text-transform:uppercase;margin-bottom:8px;display:block;
}
/* Diamond bullet — Concept 06 (Oversized Editorial) signature detail,
applied here at the shared .eyebrow level so every eyebrow label
sitewide picks it up automatically. */
.eyebrow::before{
content:'';display:inline-block;width:7px;height:7px;
background:var(--teal);transform:rotate(45deg);
margin-right:9px;vertical-align:middle;
}
.hero-photo-type .eyebrow::before{background:var(--warm-white);}
.card{background:#fff;border-radius:var(--radius);padding:24px;border:1px solid rgba(0,0,0,0.06);}
.badge{
display:inline-block;font-family:'Plus Jakarta Sans',sans-serif;font-size:11px;font-weight:700;
padding:3px 10px;border-radius:2px;background:transparent;border:1px solid var(--charcoal);color:var(--charcoal);
text-transform:uppercase;letter-spacing:0.03em;
}
.badge-orange{background:#FFE4D8;color:#993C1D;}
.chip-row{display:flex;flex-wrap:wrap;gap:6px;margin:-6px 0 14px;}
.photo-block{
border-radius:var(--radius);aspect-ratio:4/3;
background:linear-gradient(135deg,#e2e2dc,#cfcfc7);
display:flex;align-items:flex-end;padding:14px;
color:var(--mid-gray);font-size:12px;font-family:'Plus Jakarta Sans',sans-serif;
}
/* NAV */
header{
position:sticky;top:0;background:var(--warm-white);z-index:10;
border-bottom:1px solid rgba(0,0,0,0.06);
}
/* ANCHOR-LINK OFFSET — the sticky header above (~70-80px tall) sits on
top of whatever an anchor link (e.g. get-involved.html#host) scrolls
to, since without this the browser puts the target's very top edge at
the viewport's y:0, right underneath the header, cutting off the
first bit of content (marker label, heading) in each section. This
nudges every same-page jump target down so it clears the header
instead. 90px matches the offset already used for the directory
sidebar's own sticky positioning (see .directory-sidebar's top:88px)
plus a little breathing room. Add this class (or list an id here) to
any future anchor-link target. */
#volunteer, #host, #sponsor, #speak{scroll-margin-top:90px;}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding-top:16px;padding-bottom:16px;}
.logo{display:flex;align-items:center;gap:10px;}
.hex{
width:38px;height:38px;background:var(--teal);
clip-path:polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0% 50%);
display:flex;align-items:center;justify-content:center;
color:#fff;font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:13px;
}
.wordmark{font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:19px;}
nav ul{display:flex;align-items:center;gap:28px;list-style:none;margin:0;padding:0;}
nav a{font-size:14px;font-weight:500;color:var(--charcoal);display:inline-flex;align-items:center;gap:6px;}
.nav-divider{margin-left:12px;padding-left:24px;border-left:1px solid rgba(0,0,0,0.1);}
.menu-toggle{
display:none;background:none;border:none;padding:6px;cursor:pointer;
align-items:center;justify-content:center;color:var(--charcoal);
}
.menu-toggle svg{width:24px;height:24px;}
.menu-toggle .icon-close{display:none;}
.menu-toggle.is-open .icon-menu{display:none;}
.menu-toggle.is-open .icon-close{display:block;}
.nav-badge{
font-family:'Plus Jakarta Sans',sans-serif;font-size:11px;font-weight:700;
background:transparent;border:1px solid var(--charcoal);color:var(--charcoal);padding:2px 7px;border-radius:2px;
}
/* HERO — full-width photo carousel in a rounded, margined box, with an
animated highlighter-style reveal behind the type. New slides swipe in
right-to-left with a small anticipation bump before the main motion. */
.hero{padding:20px 0 32px;position:relative;}
.hero-sub{font-size:17px;color:var(--mid-gray);max-width:520px;margin:16px 0 28px;}
.hero-ctas{display:flex;gap:14px;}
.hero-photo-box{
position:relative;width:100%;aspect-ratio:2/1;border-radius:2px;overflow:hidden;
}
/* .slide is now a plain positioning wrapper (visibility + the swipe
transform only) around an that owns the Ken Burns zoom/pan.
Splitting the two transforms onto separate elements means swiping a
slide out never touches the img's zoom animation — before this split,
removing .is-current to add .is-leaving killed the zoom animation
outright, snapping the photo back to an unzoomed scale(1) for a frame
before it slid away. Now the img's zoom just keeps running,
uninterrupted, the whole time its slide is on screen. */
.hero-photo-box .slide{
position:absolute;inset:0;width:100%;height:100%;overflow:hidden;
z-index:1;visibility:hidden;
}
.hero-photo-box .slide img{
width:100%;height:100%;object-fit:cover;object-position:center 28%;display:block;
transform-origin:center;will-change:transform;
animation:hero-ken-burns 16s ease-in-out infinite alternate;
}
.hero-photo-box .slide.is-current{visibility:visible;}
/* Leaving and entering share the exact same duration, delay, and easing
curve — that's what keeps their touching edges glued together with no
gap the whole way through. (The old swipe-in had a 14%-of-duration
head start delay left over from a removed "anticipation bump" on the
leaving side; with the leaving slide now departing immediately at t=0
but the entering slide waiting ~125ms to follow, the departed slide's
vacated space had nothing sliding into it yet, exposing the box's
bare background as a grey bar. Mirroring the timing exactly closes
that gap: at any instant, leaving's trailing edge and entering's
leading edge land on the same point.) */
.hero-photo-box .slide.is-leaving{visibility:visible;z-index:1;animation:swipe-out-natural 0.9s cubic-bezier(.6,.04,.78,.2) both;}
.hero-photo-box .slide.is-entering{visibility:visible;z-index:2;animation:swipe-in-natural 0.9s cubic-bezier(.6,.04,.78,.2) both;}
@keyframes hero-ken-burns{
0%{transform:scale(1) translate(0,0);}
100%{transform:scale(1.14) translate(-2.5%,-1.5%);}
}
@keyframes swipe-out-natural{
0%{transform:translateX(0%);}
100%{transform:translateX(-100%);}
}
@keyframes swipe-in-natural{
0%{transform:translateX(100%);}
100%{transform:translateX(0%);}
}
@media (prefers-reduced-motion: reduce){
.hero-photo-box .slide.is-leaving,
.hero-photo-box .slide.is-entering{animation:none;}
.hero-photo-box .slide img{animation:none;}
}
.hero-photo-box::after{
content:"";position:absolute;inset:0;
background:linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.55) 100%);
pointer-events:none;
}
.hero-photo-type{position:absolute;left:5%;right:8%;bottom:7%;z-index:2;max-width:620px;}
.hero-photo-type .eyebrow{margin-bottom:10px;}
.hero-photo-type h1{font-size:36px;margin-bottom:2px;}
.hero-photo-type .voice{font-size:20px;}
.hero-photo-type .hero-sub{margin:14px 0 22px;font-size:16px;}
.hero-photo-type .hero-sub .hl{font-weight:500;}
.hero-photo-type .hero-ctas{gap:12px;}
.hl{
display:inline;color:var(--charcoal);
background-repeat:no-repeat;background-position:left center;background-size:0% 100%;
-webkit-box-decoration-break:clone;box-decoration-break:clone;
padding:0.05em 0.32em;border-radius:2px;
transition:background-size 0.7s cubic-bezier(.22,.68,0,1);
}
.hl-teal{background-image:linear-gradient(var(--teal-tint),var(--teal-tint));}
.hl-white{background-image:linear-gradient(#fff,#fff);}
.hl-orange{background-image:linear-gradient(#FFDCC0,#FFDCC0);}
.hero-photo-type.is-revealed .hl-1{background-size:100% 100%;transition-delay:0.25s;}
.hero-photo-type.is-revealed .hl-2{background-size:100% 100%;transition-delay:0.85s;}
.hero-photo-type.is-revealed .hl-3{background-size:100% 100%;transition-delay:1.55s;}
@media (prefers-reduced-motion: reduce){
.hl{transition:none;}
.hero-photo-type .hl{background-size:100% 100% !important;}
}
/* HERO BANNER — Concept 06 pattern: solid color banner holding left-
justified type only (eyebrow, headline, subhead, CTAs); photography
moves out of the hero into a separate gallery strip right below it,
instead of sitting behind the text as a carousel. */
.hero-banner{background:var(--orange);padding:64px 0 56px;}
.hero-banner .eyebrow{color:var(--charcoal);}
.hero-banner .eyebrow::before{background:var(--charcoal);}
.hero-banner h1{font-size:clamp(2.2rem,4.6vw,3.6rem);max-width:920px;margin-bottom:16px;}
.hero-banner .hero-sub{color:var(--charcoal);max-width:560px;}
.gallery{display:grid;grid-template-columns:1fr 1fr;}
.gallery img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;filter:grayscale(1);}
@media (max-width:640px){
.gallery{grid-template-columns:1fr;}
}
/* SPONSOR STRIP — Concept 06 pattern: a single top hairline rule, plain-
text sponsor names (no boxed chips), CTA pushed to the far right. */
.mini-sponsor{padding:28px 0;}
.mini-sponsor-inner{
display:flex;align-items:center;gap:28px;flex-wrap:wrap;
border-top:1px solid rgba(0,0,0,0.12);padding-top:28px;font-size:14px;
}
.mini-sponsor-label{font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:12px;letter-spacing:0.06em;text-transform:uppercase;color:var(--mid-gray);white-space:nowrap;}
.mini-sponsor-name{font-family:'Plus Jakarta Sans',sans-serif;font-weight:600;color:var(--charcoal);white-space:nowrap;}
.mini-sponsor-cta{margin-left:auto;font-size:14px;font-weight:700;white-space:nowrap;text-decoration:underline;text-underline-offset:4px;}
/* MISSION + STATS (one cohesive light block — pillars up top, a thin rule,
then the stats row underneath, all on the same background). */
.mission-stats{padding:48px 0 56px;}
.stats-divider{border-top:1px solid rgba(0,0,0,0.08);margin-top:40px;padding-top:40px;}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center;}
.stat-num{font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:32px;color:var(--charcoal);}
.stat-label{font-size:13px;color:var(--mid-gray);margin-top:4px;}
.affiliations{display:flex;justify-content:center;gap:12px;margin-top:28px;flex-wrap:wrap;}
.aff-chip{border:1px solid rgba(0,0,0,0.12);border-radius:2px;padding:6px 16px;font-size:13px;color:var(--mid-gray);}
/* FAMILIAR FACES (compact strip, under events) */
.familiar-strip{
margin-top:32px;padding-top:28px;border-top:1px solid rgba(0,0,0,0.06);
}
.familiar-strip-link{display:block;color:inherit;text-decoration:none;}
.familiar-strip-link:hover .familiar-strip-title{color:var(--charcoal);}
.familiar-strip-title{font-family:'Plus Jakarta Sans',sans-serif;font-weight:600;font-size:18px;margin:0 0 18px;}
.familiar-strip-avatars{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.mini-face-wrap{position:relative;}
.mini-face{
width:64px;height:64px;border-radius:50%;object-fit:cover;
border:2px solid var(--warm-white);display:block;
}
/* EVENTS */
/* Hidden until main.js reveals it (adds .is-ready) once the Supabase
fetch has settled — prevents the static fallback cards baked into the
HTML from flashing on screen before real event data replaces them.
2 columns by default (desktop/tablet); collapses to 1 in the existing
900px breakpoint below, same as the site's other multi-column grids. */
.events-list{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;visibility:hidden;}
.events-list.is-ready{visibility:visible;}
/* PAST EVENT ATTENDEES — avatar stack on past-event cards, real data
(unlike the static Familiar Faces strip below). Reuses .mini-face-sm. */
.event-attendees{display:flex;align-items:center;gap:10px;margin-top:8px;flex-wrap:wrap;}
.event-attendees-avatars{display:flex;}
.event-attendees-avatars a{display:block;margin-left:-8px;line-height:0;}
.event-attendees-avatars a:first-child{margin-left:0;}
.event-attendees-avatars .mini-face-sm{border:2px solid #fff;}
/* CHECK-IN STATUS (checkin-status.html) — kiosk display for an
unattended screen at the check-in desk. Two columns by default (this
rule applies at desktop width and carries through the existing
900px "tablet" breakpoint unchanged, since nothing overrides it
there) — details+QR on the left, the live list on the right. Only
collapses to a single stacked column under the 600px mobile
breakpoint, for the rare case someone pulls this up on their phone. */
.checkin-status-layout{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start;}
.checkin-status-headline{
font-size:56px;line-height:1;margin:0 0 16px;
}
.checkin-status-event-title{font-size:20px;font-weight:600;margin:0 0 4px;}
.checkin-status-event-meta{color:var(--mid-gray);margin:0 0 24px;}
.checkin-status-qr{border-radius:2px;}
.checkin-status-url{font-size:12px;color:var(--mid-gray);margin:12px 0 0;word-break:break-all;}
.checkin-status-count{
font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:48px;color:var(--charcoal);margin:0;line-height:1;
}
.checkin-status-count-label{color:var(--mid-gray);margin:4px 0 0;}
.checkin-status-list{max-height:70vh;overflow-y:auto;margin-top:20px;}
.event-attendees-more{
width:36px;height:36px;border-radius:50%;background:var(--charcoal);color:var(--warm-white);
display:flex;align-items:center;justify-content:center;margin-left:-8px;
font-family:'Plus Jakarta Sans',sans-serif;font-weight:600;font-size:12px;border:2px solid #fff;
}
.event-attendees-count{font-size:13px;color:var(--mid-gray);}
/* PAST EVENT PHOTOS — organizer-uploaded thumbnail strip on a past-event
card (see database/migration_event_photos.sql + manage-events.html's
"Photos" button). Sits as its own row between the banner image and
the event-details block (title/meta/attendees) — a direct .event-card
flex child, not nested inside .event-details, so it gets the card's
own gap:20px above and below for free instead of a hand-tuned margin.
Click opens .photo-lightbox-overlay below.
flex-wrap:nowrap + horizontal scroll, not wrap — flex-grow across a
wrapped row meant the last (incomplete) row divided its width among
fewer items, so a 3-then-2 split rendered visibly bigger thumbnails
on the wrapped row. Scrolling sidesteps that entirely: every
thumbnail always sits in one row, so they're always the same size as
each other, and any that don't fit are a swipe/scroll away instead of
reflowing. Same "browse at your own pace via native scroll" pattern
as .event-photo-track in the Recent Events carousel. */
.event-photo-strip{
display:flex;align-items:center;gap:8px;flex-wrap:nowrap;
overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:2px;
}
.event-photo-strip::-webkit-scrollbar{height:6px;}
.event-photo-strip::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.15);border-radius:2px;}
.event-photo-thumb{
/* flex:0 0 auto (no grow/shrink) + a clamped width — every thumbnail
is exactly the same size at any given viewport width, and that size
itself scales smoothly between 84px and 132px as the viewport
shrinks, rather than each thumbnail's size depending on how many
others happen to share its row. */
flex:0 0 auto;width:clamp(84px, 22vw, 132px);height:auto;aspect-ratio:1;
border-radius:2px;overflow:hidden;padding:0;border:none;
cursor:pointer;background:var(--warm-white);
}
.event-photo-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.event-photo-more{
font-size:14px;color:var(--mid-gray);font-family:'Plus Jakarta Sans',sans-serif;
}
/* PHOTO SKELETON LOADING — event.html's full gallery, the compact
past-event photo strip, and the Recent Events carousel all fetch a
batch of photos and drop every into the DOM at once. On a slow
connection (the mobile "looks broken" report) each one finishes
downloading seconds apart and pops in out of order, which reads as
broken rather than just slow — especially since every thumb here
already reserves its real size up front (aspect-ratio / fixed
width+height), so there's no layout shift, just a blank tile sitting
there. This gives every matching an animated shimmer background
for however long it takes to load — a plain CSS gradient, no extra
markup — that the real photo simply paints over once it arrives. The
inline onload/onerror on each (see main.js's renderRecentPhoto,
renderEventPhotoStrip, and epRenderGalleryHTML) adds .img-loaded to
stop the animation for good once that happens, rather than leaving it
running forever, invisible, underneath an opaque photo. onerror gets
the same class so a broken photo URL settles into a plain empty tile
instead of shimmering indefinitely. */
@keyframes photoSkeletonShimmer{
0%{background-position:200% 0;}
100%{background-position:-200% 0;}
}
.event-photo-gallery-thumb img,
.event-photo-thumb img,
.event-photo-track img{
background:linear-gradient(100deg, rgba(0,0,0,0.05) 30%, rgba(0,0,0,0.11) 45%, rgba(0,0,0,0.11) 55%, rgba(0,0,0,0.05) 70%);
background-size:250% 100%;
animation:photoSkeletonShimmer 1.3s ease-in-out infinite;
}
.event-photo-gallery-thumb img.img-loaded,
.event-photo-thumb img.img-loaded,
.event-photo-track img.img-loaded{
animation:none;background:none;
}
/* EVENT PAGE PHOTO GALLERY (event.html) — the full-album grid for one
event, distinct from the compact .event-photo-strip on a past-event
card and the horizontal .event-photo-track carousel. A plain wrapping
grid since there's no card-row overflow problem to solve here — the
whole page is already dedicated to this one event's photos. Click
opens .recent-photo-lightbox-overlay via createPhotoLightbox() in
main.js. */
.event-photo-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:10px;margin-bottom:16px;}
.event-photo-gallery-thumb{
aspect-ratio:1;border-radius:2px;overflow:hidden;padding:0;border:none;
cursor:pointer;background:var(--warm-white);
}
.event-photo-gallery-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
/* EVENT PAGE BANNER (event.html) — deliberately its own class, not
.photo-block. .photo-block's base rule sets aspect-ratio:4/3 for an
unrelated placeholder-card use, which (with object-fit left at its
default `fill`) stretches/warps any image that isn't actually 4:3.
.event-card .photo-block overrides that back for event cards
elsewhere on the site, but this banner isn't inside an .event-card,
so it gets its own rule with the same fix: the image keeps its own
proportions and is never cropped or stretched, just scaled to fit. */
.event-page-banner{
width:100%;max-width:100%;height:auto;aspect-ratio:auto;object-fit:contain;
border-radius:2px;display:block;margin-bottom:24px;background:var(--warm-white);
}
/* EVENT PAGE — Photos + Who-was-there widened to match the banner above
(.event-page-banner spans the full .wrap), rather than
.profile-section's default max-width:640px readable-paragraph cap —
same override pattern as .account-event-history-section. The event
description between them keeps that narrower cap (still just
.profile-section, no extra class), since a full-width paragraph reads
worse, not better. Photos also drops .profile-section's implicit
transparency down to explicit none — these two live directly on the
page's own background, not inside a bordered card, so nothing here
should ever pick up a background or border of its own. */
.event-page-photos-section{max-width:none;background:none;border:none;}
.event-page-attendees-section{max-width:none;}
/* EVENT ATTENDEE LIST (event.html's "Who was there") — full rows
(avatar + name + tier), not the overlapping-circle facepile
.event-attendees-avatars renders elsewhere. This page has the room,
and a roster reads better than a compact stack for one specific
event. Reuses .mini-face-sm for the avatar itself. */
.event-attendee-list{display:flex;flex-direction:column;}
.event-attendee-row{
display:flex;align-items:center;gap:12px;padding:10px 0;
border-bottom:1px solid rgba(0,0,0,0.06);color:var(--charcoal);
}
.event-attendee-row:last-child{border-bottom:none;}
.event-attendee-name{flex:1;font-weight:600;}
.event-attendee-tier{font-size:12px;color:var(--mid-gray);}
/* FILE INPUTS — the native "Choose Files" control otherwise renders as
a bare, unbranded OS button dropped into an otherwise-styled form
(event.html's "Add your photos", manage-events.html's "Photos"
modal, the account photo uploader). ::file-selector-button is the
standardized cross-browser pseudo-element for just that button
(::-webkit-file-upload-button covers older WebKit); this reskins it
to match .btn.btn-outline. The filename text next to it is left as
the browser default — that part isn't stylable cross-browser the
way the button is. */
input[type="file"].form-input{padding:8px 10px;}
input[type="file"].form-input::file-selector-button,
input[type="file"].form-input::-webkit-file-upload-button{
display:inline-flex;align-items:center;gap:6px;
font-family:'Plus Jakarta Sans',sans-serif;font-weight:600;font-size:14px;
padding:9px 18px;border-radius:2px;border:2px solid var(--charcoal);
background:transparent;color:var(--charcoal);cursor:pointer;
margin-right:12px;
}
/* Single shared lightbox for every past-event photo strip on the page —
see wirePastEventPhotoThumbs() in main.js. Same full-screen dark
overlay pattern as .event-form-modal-overlay, just showing one image
full-size instead of a form. */
.photo-lightbox-overlay{
display:none;position:fixed;inset:0;background:rgba(27,27,27,0.9);z-index:250;
align-items:center;justify-content:center;padding:40px;
}
.photo-lightbox-overlay.is-open{display:flex;}
.photo-lightbox-img{max-width:100%;max-height:100%;border-radius:2px;object-fit:contain;}
.photo-lightbox-close{
position:absolute;top:20px;right:24px;background:none;border:none;
color:#fff;font-size:32px;line-height:1;cursor:pointer;padding:0;
}
.photo-lightbox-close:hover{opacity:0.8;}
.event-card{
/* width:100% + min-width:0 — without min-width:0, a flex item's
automatic minimum size defaults to its content's min-content width,
which can be wider than the card if a title, host name, or venue
string is long. That let some cards grow wider than others instead
of all matching .events-list's width; min-width:0 removes that
floor so every card actually stretches to fill the same width, and
long text wraps inside it instead. */
display:flex;flex-direction:column;gap:20px;background:#fff;border-radius:2px;
border:1px solid rgba(0,0,0,0.06);padding:14px;width:100%;min-width:0;box-sizing:border-box;
}
.event-card .photo-block{
/* No fixed box anymore — width is capped at the column (100%), height
is auto, so the image's own natural ratio decides its height. A
larger-than-column image shrinks to fit; a smaller one grows to
fill it. Either way there's no separate box bigger than the photo
itself, so there's no leftover space and nothing to fill with a
background color. Left-justified by default, since a block-level
image at width:100% has nothing to justify against — it always
exactly fills the column.
aspect-ratio:auto is required here, not decorative — the base
.photo-block rule above sets aspect-ratio:4/3 for the (unrelated)
placeholder-card use case, and without overriding it back to auto,
that 4/3 box combined with height:auto forces every event photo
into a 4:3 frame regardless of its real shape — object-fit's
default is `fill`, so the photo would silently squish/stretch to
match instead of keeping its own proportions. object-fit:contain
is a second layer of the same protection: even if a height ever
gets constrained again later, the photo scales to fit inside it
without ever being distorted — it'd just letterbox, never crop or
stretch. No cropping either way — see database/schema.sql
events.image_url. */
width:100%;max-width:100%;height:auto;aspect-ratio:auto;object-fit:contain;
flex-shrink:0;margin-bottom:0;font-size:0;border-radius:2px;padding:0;border:none;display:block;
}
.event-details{display:flex;flex-direction:column;justify-content:center;flex:1;min-width:0;}
.event-meta{font-size:13px;color:var(--mid-gray);margin-bottom:6px;overflow-wrap:break-word;}
.event-title{font-family:'Plus Jakarta Sans',sans-serif;font-weight:600;font-size:17px;margin-bottom:8px;overflow-wrap:break-word;}
.events-empty{color:var(--mid-gray);font-size:14px;padding:24px;text-align:center;background:#fff;border-radius:2px;border:1px solid rgba(0,0,0,0.06);}
/* AUDIENCE CARDS */
.audience-grid{grid-template-columns:repeat(3,1fr);}
.audience-card h3{font-size:19px;}
.audience-card p{color:var(--mid-gray);font-size:14px;min-height:66px;}
/* MISSION BLURB (homepage teaser — full mission/stats content lives on about.html) */
.mission-blurb{padding:40px 0;}
.mission-blurb-text{
font-family:'Plus Jakarta Sans',sans-serif;font-weight:600;font-size:clamp(1.5rem,3vw,2.1rem);
max-width:820px;color:var(--charcoal);letter-spacing:-0.01em;
}
.mission-blurb-text a{color:var(--charcoal);white-space:nowrap;font-weight:700;text-decoration:underline;text-underline-offset:4px;}
/* MISSION / HOW WE SERVE */
.pillars-grid{grid-template-columns:repeat(3,1fr);margin-top:32px;}
.pillar-card{text-align:center;padding:0 16px;}
.pillar-icon{
width:44px;height:44px;color:var(--charcoal);
display:flex;align-items:center;justify-content:center;font-size:32px;margin:0 auto 16px;
}
.pillar-card h3{font-size:18px;margin:0;}
.pillar-card p{font-size:13px;color:var(--mid-gray);margin:6px 0 0;}
/* BOARD (about page) */
.board-grid{grid-template-columns:repeat(3,1fr);margin-top:32px;row-gap:36px;}
.board-card{text-align:center;}
.board-photo{
width:120px;height:120px;border-radius:50%;object-fit:cover;
margin:0 auto 14px;display:block;border:3px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,0.06);
}
.board-card h3{font-size:16px;margin:0;}
.board-role{
display:block;font-family:'Plus Jakarta Sans',sans-serif;font-size:12px;font-weight:700;
letter-spacing:0.03em;text-transform:uppercase;color:var(--charcoal);margin-top:4px;
}
/* GET INVOLVED PAGE */
.involved-grid{grid-template-columns:repeat(4,1fr);margin-top:32px;}
.involved-card{display:flex;flex-direction:column;}
.involved-icon{
width:44px;height:44px;color:var(--charcoal);
display:flex;align-items:center;justify-content:center;font-size:32px;margin-bottom:16px;
}
.involved-card .btn{margin-top:auto;align-self:flex-start;}
/* GET INVOLVED (homepage) — Concept 06 arrow-card pattern: a hairline top
rule instead of a boxed card, a plain arrow glyph instead of an icon-in-
a-box graphic, and minimal copy. Scoped to .involved-grid (homepage)
only — get-involved.html's own cards use .involved-grid-3 and its
existing boxed treatment, untouched. */
.involved-grid{gap:0;}
.involved-grid .involved-card{padding:24px 24px 0 0;}
.involved-grid .involved-card:not(:first-child){padding-left:24px;}
.involved-grid .involved-card h3{font-size:18px;margin:0 0 6px;}
.involved-grid .involved-card p{font-size:14px;color:var(--mid-gray);margin:0 0 16px;}
.arrow-icon{font-size:22px;color:var(--charcoal);margin-bottom:14px;display:block;}
.card-link{
background:none;border:none;padding:0;font-family:'Plus Jakarta Sans',sans-serif;cursor:pointer;
display:inline-block;font-size:13px;font-weight:700;color:var(--charcoal);
text-decoration:underline;text-underline-offset:4px;
}
@media (max-width:900px){
.involved-grid{grid-template-columns:1fr 1fr;}
.involved-grid .involved-card:nth-child(odd){padding-left:0;}
.involved-grid .involved-card:nth-child(2){padding-left:24px;}
}
@media (max-width:560px){
.involved-grid{grid-template-columns:1fr;}
.involved-grid .involved-card{padding-left:0 !important;}
}
.involved-list{list-style:none;padding:0;margin:12px 0 20px;}
.involved-list li{display:flex;align-items:flex-start;gap:10px;font-size:14px;color:var(--charcoal);margin-bottom:10px;}
.involved-list svg{width:16px;height:16px;flex-shrink:0;margin-top:2px;}
.involved-note{font-size:13px;color:var(--mid-gray);margin-top:48px;text-align:center;}
/* Bolder replacement for the old icon + tiny pill-badge combo on the Get
Involved page specifically — a filled, squared-off icon chip (matches
the hexagon-badge geometry from the logo) paired with a bigger,
bold label, instead of a low-contrast rounded pill. Deliberately a
separate component from .involved-icon/.badge, which index.html's
homepage teaser still uses and isn't part of this change. */
.involved-marker{display:flex;align-items:center;gap:14px;margin-bottom:18px;}
.involved-marker-icon{
width:52px;height:52px;border-radius:2px;background:var(--teal);color:var(--charcoal);
display:flex;align-items:center;justify-content:center;font-size:26px;flex-shrink:0;
}
.involved-marker-label{
font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:15px;
text-transform:uppercase;letter-spacing:0.03em;color:var(--charcoal);
}
/* GET INVOLVED PAGE — featured Volunteer block (full-width, photo +
content) sits above the other three tracks. .involved-grid-3 is a
separate 3-column modifier from the homepage's 4-column
.involved-grid, since that class is shared with index.html's Audience
teaser and still needs all 4 cards there. */
.involved-feature{grid-template-columns:1fr 1fr;align-items:center;gap:48px;}
.involved-feature-media img{
width:100%;height:380px;object-fit:cover;border-radius:var(--radius);display:block;
}
.involved-feature-body h2{margin-top:12px;}
.involved-section-label{
display:block;font-family:'Plus Jakarta Sans',sans-serif;font-size:12px;font-weight:700;
letter-spacing:0.04em;text-transform:uppercase;color:var(--mid-gray);margin-bottom:20px;
}
.involved-grid-3{grid-template-columns:repeat(3,1fr);margin-top:0;}
/* DIRECTORY TEASER (homepage) — matches directory.html's real .profile-card
treatment exactly (cover-photo splash + overlapping avatar + full meta
line), so the homepage teaser and the full directory page look
consistent. .teaser-card picks up all of that via the shared
.profile-splash/.avatar-overlay/.profile-body rules below — no
homepage-specific override needed. */
.directory-teaser-grid{grid-template-columns:repeat(3,1fr);margin-top:32px;}
.teaser-card{
background:#fff;border-radius:2px;border:1px solid rgba(0,0,0,0.06);overflow:hidden;
}
.lock-icon{width:13px;height:13px;flex-shrink:0;}
.directory-teaser-foot{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:32px;flex-wrap:wrap;}
.directory-teaser-note{font-size:13px;color:var(--mid-gray);}
/* RECENT EVENT PHOTO CAROUSEL — reusable block (_includes/recent-event-
photos.html), used on events.html's full "Recent events" section and
as a condensed strip on the homepage. Plain native-scroll + scroll-
snap rather than a JS state machine, since there's no autoplay or
crossfade here, just browse-at-your-own-pace. */
.event-photo-carousel{position:relative;margin-top:24px;}
/* Populated live from Supabase (main.js's "RECENT EVENT PHOTOS" block) —
hidden until that fetch resolves, same hidden-until-ready pattern as
.events-list, so there's nothing stale to flash before real photos
load in. */
.event-photo-carousel[data-recent-photos]{visibility:hidden;}
.event-photo-carousel[data-recent-photos].is-ready{visibility:visible;}
.event-photo-track{
display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;
scroll-behavior:smooth;padding-bottom:10px;-webkit-overflow-scrolling:touch;
}
.event-photo-track::-webkit-scrollbar{height:6px;}
.event-photo-track::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.15);border-radius:2px;}
.event-photo-track img{
scroll-snap-align:start;flex:0 0 auto;width:280px;height:200px;
object-fit:cover;border-radius:2px;background:var(--warm-white);
cursor:pointer; /* click opens the lightbox — see [data-lightbox-index] in main.js */
}
.event-photo-carousel--compact .event-photo-track img{width:200px;height:150px;}
/* Captioned variant (events.html's full carousel) — each photo is a
instead of a bare , so the caption scroll-snaps as one
unit with its photo. */
.event-photo-track figure{scroll-snap-align:start;flex:0 0 auto;width:280px;margin:0;}
.event-photo-track figure img{
width:100%;height:200px;object-fit:cover;border-radius:2px;
background:var(--warm-white);display:block;
}
.event-photo-caption{margin-top:10px;}
.event-photo-caption-title{font-size:14px;font-weight:600;color:var(--charcoal);margin:0 0 2px;}
.event-photo-caption-date{font-size:12px;color:var(--mid-gray);margin:0;}
.carousel-nav{
position:absolute;top:calc(50% - 5px);transform:translateY(-50%);
width:40px;height:40px;border-radius:50%;background:#fff;
border:1px solid rgba(0,0,0,0.1);box-shadow:0 2px 8px rgba(0,0,0,0.12);
display:flex;align-items:center;justify-content:center;font-size:20px;
line-height:1;cursor:pointer;z-index:2;color:var(--charcoal);
}
.carousel-nav.prev{left:-8px;}
.carousel-nav.next{right:-8px;}
@media (max-width:640px){.carousel-nav{display:none;}}
/* RECENT PHOTOS LIGHTBOX — click-to-enlarge viewer for the carousel
above, with its own prev/next to step through whichever photos are
currently loaded (independent of the carousel's plain scroll nav).
One overlay ships inside each recent-event-photos.html render,
immediately after its .event-photo-carousel — see the "RECENT EVENT
PHOTOS" block in main.js for the wiring. Distinct from
.photo-lightbox-overlay (the single-image viewer for a past-event
card's own photo strip) since this one needs prev/next + a caption. */
.recent-photo-lightbox-overlay{
display:none;position:fixed;inset:0;background:rgba(27,27,27,0.92);z-index:250;
align-items:center;justify-content:center;padding:40px;
}
.recent-photo-lightbox-overlay.is-open{display:flex;}
.recent-photo-lightbox-body{max-width:100%;max-height:100%;display:flex;flex-direction:column;align-items:center;gap:12px;}
.recent-photo-lightbox-img{max-width:100%;max-height:75vh;border-radius:2px;object-fit:contain;}
.recent-photo-lightbox-caption{color:#fff;font-size:14px;text-align:center;}
.recent-photo-lightbox-close{
position:absolute;top:20px;right:24px;background:none;border:none;
color:#fff;font-size:32px;line-height:1;cursor:pointer;padding:0;z-index:2;
}
.recent-photo-lightbox-close:hover{opacity:0.8;}
.recent-photo-lightbox-nav{
position:absolute;top:50%;transform:translateY(-50%);
width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,0.15);
border:none;color:#fff;font-size:26px;line-height:1;cursor:pointer;
display:flex;align-items:center;justify-content:center;z-index:2;
}
.recent-photo-lightbox-nav:hover{background:rgba(255,255,255,0.3);}
.recent-photo-lightbox-nav.prev{left:16px;}
.recent-photo-lightbox-nav.next{right:16px;}
@media (max-width:640px){.recent-photo-lightbox-nav{width:38px;height:38px;font-size:20px;}}
/* VIDEO LIBRARY */
.video-card{
background:#fff;border-radius:2px;border:1px solid rgba(0,0,0,0.06);overflow:hidden;
}
.video-thumb{
position:relative;aspect-ratio:16/9;
background:linear-gradient(135deg,#e2e2dc,#cfcfc7);
}
.video-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.video-play{
position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
width:52px;height:52px;border-radius:50%;background:rgba(27,27,27,0.75);
display:flex;align-items:center;justify-content:center;
}
.video-play svg{width:18px;height:18px;margin-left:3px;}
.video-body{padding:18px;}
.video-meta{font-size:12px;color:var(--mid-gray);margin-bottom:6px;font-family:'Plus Jakarta Sans',sans-serif;}
.video-title{font-family:'Plus Jakarta Sans',sans-serif;font-weight:600;font-size:16px;margin-bottom:8px;}
.video-desc{font-size:13px;color:var(--mid-gray);margin-bottom:14px;}
.video-grid{grid-template-columns:1fr;}
.video-library-grid{grid-template-columns:5fr 7fr;align-items:center;}
/* TESTIMONIALS */
.testimonial-grid{grid-template-columns:repeat(3,1fr);gap:24px;margin-top:32px;}
.testimonial-card{
background:#fff;border-radius:2px;border:1px solid rgba(0,0,0,0.06);padding:28px;
display:flex;flex-direction:column;
}
.testimonial-quote{font-size:15px;color:var(--charcoal);line-height:1.5;flex:1;margin:0 0 20px;}
.testimonial-author{display:flex;align-items:center;gap:12px;}
.testimonial-avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;flex-shrink:0;}
.testimonial-avatar.company{
background:var(--charcoal);color:#fff;display:flex;align-items:center;justify-content:center;
font-weight:600;font-family:'Plus Jakarta Sans',sans-serif;font-size:13px;border-radius:2px;
}
.testimonial-name{font-weight:600;font-size:14px;}
.testimonial-role{font-size:12px;color:var(--mid-gray);}
.video-cta-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:28px;}
.video-cta-note{font-size:13px;color:var(--mid-gray);}
/* JOIN OPTIONS (community.html) */
.join-options-grid{grid-template-columns:repeat(3,1fr);gap:24px;margin-top:8px;}
.join-option-card{
background:#fff;border-radius:2px;border:1px solid rgba(0,0,0,0.08);padding:32px;
display:flex;flex-direction:column;
}
.join-option-card.featured{border:2px solid var(--teal);position:relative;}
.join-option-badge{
position:absolute;top:-13px;left:32px;background:var(--teal);color:var(--charcoal);
font-family:'Plus Jakarta Sans',sans-serif;font-size:11px;font-weight:700;
padding:4px 12px;border-radius:2px;text-transform:uppercase;letter-spacing:0.03em;
}
.join-option-title{font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:20px;margin:0;}
.join-option-price{font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:36px;margin:12px 0 4px;color:var(--charcoal);}
.join-option-price span{font-family:'Plus Jakarta Sans',sans-serif;font-weight:500;font-size:14px;color:var(--mid-gray);}
.join-option-desc{font-size:14px;color:var(--mid-gray);margin-bottom:20px;}
.join-option-list{list-style:none;padding:0;margin:0 0 24px;flex:1;}
.join-option-list li{display:flex;align-items:flex-start;gap:10px;font-size:14px;color:var(--charcoal);margin-bottom:12px;}
.join-option-list svg{width:16px;height:16px;flex-shrink:0;margin-top:2px;}
.join-option-note{font-size:12px;color:var(--mid-gray);margin-top:12px;}
/* PAGE HEADER (interior pages) — Concept 06 pattern: same solid gold
banner + left-justified ink type as the homepage hero, scaled down for
interior pages (no photo gallery below). */
.page-header{background:var(--orange);padding:48px 0 40px;}
.page-header .eyebrow{color:var(--charcoal);}
.page-header .eyebrow::before{background:var(--charcoal);}
.page-header h1{font-size:clamp(2.2rem,4.6vw,3.6rem);max-width:820px;color:var(--charcoal);}
.page-header p{color:var(--charcoal);max-width:520px;margin:0;}
.page-header a:not(.btn){text-decoration:underline;text-underline-offset:4px;}
/* DIRECTORY (full experience, directory.html) */
.directory-section{background:none;}
.directory-layout{display:grid;grid-template-columns:240px 1fr;gap:32px;align-items:start;}
.directory-sidebar{background:#fff;border-radius:2px;padding:22px;position:sticky;top:88px;}
.filter-group{margin-bottom:20px;}
.filter-label{display:block;font-size:12px;font-weight:600;color:var(--charcoal);margin-bottom:8px;text-transform:uppercase;letter-spacing:0.03em;}
.filter-select,.filter-input{
width:100%;padding:9px 10px;border-radius:2px;border:1px solid rgba(0,0,0,0.15);
font-family:'Plus Jakarta Sans',sans-serif;font-size:13px;color:var(--charcoal);background:#fff;
}
.filter-check{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--mid-gray);margin-bottom:8px;}
.filter-check input{accent-color:var(--charcoal);}
.sidebar-familiar{margin-top:24px;padding-top:20px;border-top:1px solid rgba(0,0,0,0.06);}
.sidebar-familiar-title{font-family:'Plus Jakarta Sans',sans-serif;font-weight:600;font-size:14px;margin:0 0 14px;}
.sidebar-familiar-list{display:flex;flex-direction:column;gap:14px;visibility:hidden;}
.sidebar-familiar-list.is-ready{visibility:visible;}
.sidebar-familiar-item{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none;}
.sidebar-familiar-item:hover .sidebar-familiar-name{color:var(--charcoal);}
.mini-face-sm{width:36px;height:36px;border-radius:50%;object-fit:cover;flex-shrink:0;}
.sidebar-familiar-name{font-weight:600;font-size:13px;color:var(--charcoal);}
.sidebar-familiar-seen{font-size:12px;color:var(--mid-gray);}
.sidebar-familiar-empty{font-size:13px;color:var(--mid-gray);margin:0;}
.directory-main-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:20px;flex-wrap:wrap;gap:12px;}
.results-count{font-size:13px;color:var(--mid-gray);}
.tier-legend{display:flex;align-items:center;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--mid-gray);margin-bottom:20px;}
.tier-legend-item{display:flex;align-items:center;gap:6px;}
.tier-legend-dot{width:10px;height:10px;border-radius:50%;background:var(--warm-white);flex-shrink:0;}
.tier-legend-dot.tier-regular{box-shadow:0 0 0 2px rgba(21,21,15,0.18);}
.tier-legend-dot.tier-familiar{box-shadow:0 0 0 2px var(--teal);}
.tier-legend-dot.tier-mayor{box-shadow:0 0 0 2px var(--orange);}
.profile-grid{grid-template-columns:repeat(3,1fr);}
.directory-load-more{text-align:center;margin-top:28px;}
.profile-empty-state{
background:#fff;border-radius:2px;border:1px solid rgba(0,0,0,0.06);
padding:48px 32px;text-align:center;color:var(--mid-gray);font-size:14px;
}
.profile-card{
background:#fff;border-radius:2px;border:1px solid rgba(0,0,0,0.06);overflow:hidden;
}
.profile-splash{
position:relative;height:170px;
}
.profile-splash .photo-block{font-size:0;aspect-ratio:auto;height:100%;width:100%;object-fit:cover;padding:0;background:none;}
.avatar-overlay{
position:absolute;left:16px;bottom:-26px;width:56px;height:56px;border-radius:50%;
background:var(--teal);border:3px solid #fff;display:flex;align-items:center;justify-content:center;
color:var(--charcoal);font-weight:600;font-family:'Plus Jakarta Sans',sans-serif;font-size:14px;
object-fit:cover;
}
.avatar-overlay.company{border-radius:2px;background:var(--charcoal);color:var(--warm-white);}
/* Compact card — free/community tier, no featured-image splash. The
avatar sits inline at the top instead of overlapping a photo. */
.teaser-card.is-compact .profile-splash,
.profile-card.is-compact .profile-splash{
height:auto;padding:20px 16px 0;
}
.teaser-card.is-compact .avatar-overlay,
.profile-card.is-compact .avatar-overlay{
position:static;
}
.teaser-card.is-compact .profile-body,
.profile-card.is-compact .profile-body{
padding-top:14px;
}
/* Attendance tier rings — shown on top of the avatar's white border */
.avatar-overlay.tier-regular,.mini-face.tier-regular,.profile-hero-avatar.tier-regular{box-shadow:0 0 0 3px rgba(21,21,15,0.18);}
.avatar-overlay.tier-familiar,.mini-face.tier-familiar,.profile-hero-avatar.tier-familiar{box-shadow:0 0 0 3px var(--teal);}
.avatar-overlay.tier-mayor,.mini-face.tier-mayor,.profile-hero-avatar.tier-mayor{box-shadow:0 0 0 3px var(--orange);}
/* PUBLIC PROFILE PAGE */
.profile-hero{
background:#fff;border-radius:2px;border:1px solid rgba(0,0,0,0.06);padding:40px;
display:flex;gap:28px;align-items:center;flex-wrap:wrap;
}
.profile-hero-avatar{width:120px;height:120px;border-radius:50%;object-fit:cover;flex-shrink:0;border:3px solid #fff;}
.profile-hero-avatar.company{border-radius:2px;background:var(--charcoal);color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:32px;}
.profile-hero-info{flex:1;min-width:240px;}
.profile-hero-info h1{font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:28px;margin:0 0 6px;}
.profile-hero-meta{font-size:14px;color:var(--mid-gray);margin:0 0 14px;}
.profile-hero-badges{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px;}
.profile-hero-actions{display:flex;gap:10px;flex-wrap:wrap;}
.profile-locked-link{color:var(--mid-gray);border-color:rgba(0,0,0,0.15);}
.profile-locked-link:hover{border-color:var(--charcoal);color:var(--charcoal);}
.profile-featured-image{width:100%;height:320px;object-fit:cover;border-radius:2px;margin-top:32px;display:block;}
.profile-section{margin-top:40px;max-width:640px;}
.profile-section h2{font-size:18px;margin:0 0 12px;}
.profile-section p{color:var(--charcoal);font-size:15px;line-height:1.6;margin:0;}
.profile-tags{display:flex;flex-wrap:wrap;gap:8px;}
.profile-tag{background:transparent;border:1px solid var(--charcoal);color:var(--charcoal);font-size:13px;font-weight:600;padding:6px 14px;border-radius:2px;}
.profile-open-list{list-style:none;padding:0;margin:0;}
.profile-open-list li{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--charcoal);margin-bottom:10px;}
.profile-open-list svg{width:16px;height:16px;flex-shrink:0;}
.profile-roles-list{list-style:none;padding:0;margin:0;}
.profile-roles-list li{font-size:15px;color:var(--charcoal);padding:12px 0;border-bottom:1px solid rgba(0,0,0,0.06);}
.profile-roles-list li:last-child{border-bottom:none;}
.account-event-history-list{list-style:none;padding:0;margin:0;}
.account-event-history-list li{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:15px;color:var(--charcoal);padding:12px 0;border-bottom:1px solid rgba(0,0,0,0.06);}
.account-event-history-list li:last-child{border-bottom:none;}
.account-event-history-title{font-weight:600;color:var(--charcoal);}
.account-event-history-title[href]:hover{color:var(--charcoal);}
.account-event-history-meta{font-size:13px;color:var(--mid-gray);}
/* Overrides .profile-section's max-width:640px (used elsewhere for
readable paragraph width, e.g. profile.html's About section) so this
block matches the full width of the .listing-form cards above it on
account.html instead of running narrower. */
.account-event-history-section{max-width:none;}
.profile-body{padding:38px 16px 18px;}
.profile-name-row{display:flex;align-items:center;gap:8px;margin-bottom:2px;flex-wrap:wrap;}
.profile-name{font-weight:600;font-size:15px;}
.profile-role{font-size:13px;color:var(--mid-gray);margin-bottom:8px;}
.profile-meta{font-size:12px;color:var(--mid-gray);margin-bottom:14px;}
.profile-actions{display:flex;gap:8px;}
.profile-actions .btn{padding:8px 14px;font-size:13px;}
/* GET LISTED (tier select + form) */
.tier-select{margin-top:8px;}
.tier-radio{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;}
.tier-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:36px;}
.tier-card{
display:block;cursor:pointer;background:#fff;border-radius:2px;padding:22px;
border:2px solid rgba(0,0,0,0.08);
}
.tier-card-title{font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:16px;margin:0 0 4px;}
.tier-card-price{font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:20px;margin:0 0 8px;color:var(--charcoal);}
.tier-card-price span{font-family:'Plus Jakarta Sans',sans-serif;font-weight:500;font-size:13px;color:var(--mid-gray);}
.tier-card-desc{font-size:13px;color:var(--mid-gray);margin:0;}
#tier-free:checked ~ .tier-cards label[for="tier-free"],
#tier-member:checked ~ .tier-cards label[for="tier-member"],
#tier-employer:checked ~ .tier-cards label[for="tier-employer"]{
border-color:var(--charcoal);background:rgba(242,194,48,0.18);
}
.tier-panel{display:none;}
#tier-free:checked ~ .tier-panels #panel-free,
#tier-member:checked ~ .tier-panels #panel-member,
#tier-employer:checked ~ .tier-panels #panel-employer{display:block;}
.listing-form{background:#fff;border-radius:2px;border:1px solid rgba(0,0,0,0.06);padding:32px;}
.upsell-note{
margin-top:24px;padding:20px;border-radius:2px;background:var(--warm-white);border:1px solid rgba(0,0,0,0.08);
display:flex;gap:14px;align-items:flex-start;
}
.upsell-note-icon{
width:32px;height:32px;border-radius:50%;background:#fff;color:var(--charcoal);flex-shrink:0;
display:flex;align-items:center;justify-content:center;font-size:16px;
}
.upsell-note-text{font-size:13px;color:var(--charcoal);margin:0 0 12px;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.form-group{margin-bottom:20px;}
.form-label{display:block;font-size:13px;font-weight:600;margin-bottom:6px;color:var(--charcoal);}
.form-input,.form-select,.form-textarea{
width:100%;padding:11px 14px;border-radius:2px;border:1px solid rgba(0,0,0,0.15);
font-family:'Plus Jakarta Sans',sans-serif;font-size:14px;color:var(--charcoal);background:#fff;
}
.form-textarea{resize:vertical;min-height:90px;}
.form-check-group{display:flex;flex-wrap:wrap;gap:16px;margin-top:4px;}
.form-check{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--charcoal);cursor:pointer;}
.form-check input{accent-color:var(--charcoal);}
.form-upload{
display:flex;align-items:center;gap:8px;justify-content:center;cursor:pointer;
border:1px dashed rgba(0,0,0,0.2);border-radius:2px;padding:22px;font-size:13px;color:var(--mid-gray);
}
.form-hint{font-size:12px;color:var(--mid-gray);margin-top:6px;margin-bottom:0;}
/* ACCOUNT PAGE — editable avatar badge */
.account-avatar-wrap{position:relative;flex-shrink:0;display:inline-block;}
.account-avatar-btn{
position:absolute;bottom:2px;right:2px;width:32px;height:32px;border-radius:50%;
background:var(--charcoal);color:#fff;display:flex;align-items:center;justify-content:center;
cursor:pointer;border:2px solid #fff;font-size:14px;
}
.account-avatar-btn:hover{background:var(--teal);color:var(--charcoal);}
.account-avatar-btn input{display:none;}
.account-photo-remove{
display:block;margin:8px auto 0;background:none;border:none;padding:0;font-size:12px;
color:var(--mid-gray);text-decoration:underline;cursor:pointer;font-family:'Plus Jakarta Sans',sans-serif;
text-align:center;width:100%;
}
.account-photo-remove:hover{color:var(--charcoal);}
/* ACCOUNT PAGE — "Personal details" card (2026-07-13) — unifies the
signed-in/membership/organizer rows into one card instead of three
separate ones. Each row lives inside its own .account-detail-block so
that any expandable extra content (the change-password form, the
membership cancel status message) stays grouped with its row —
:not(:last-child) below then draws a separator between blocks
correctly regardless of which rows/extras happen to be present for a
given visitor (community vs. member vs. company, organizer or not). */
.account-detail-block:not(:last-child){border-bottom:1px solid rgba(0,0,0,0.06);}
.account-detail-row{display:flex;align-items:center;gap:14px;padding:16px 0;}
.account-detail-icon{font-size:20px;width:20px;flex-shrink:0;text-align:center;color:var(--mid-gray);}
.account-detail-content{flex:1;min-width:0;}
.account-detail-label{margin:0;font-weight:600;font-size:14px;color:var(--charcoal);}
.account-detail-value{margin:2px 0 0;font-size:13px;color:var(--mid-gray);word-break:break-word;}
.account-detail-actions{display:flex;gap:8px;flex-wrap:wrap;flex-shrink:0;}
/* Indented to line up under .account-detail-content, not the icon
column, and pulled up slightly so it doesn't read as a new row. */
.account-detail-extra{padding:0 0 16px 34px;margin-top:-6px;}
.account-detail-block .form-hint.account-detail-extra{margin-top:-8px;}
/* AVATAR CROP MODAL */
.crop-modal-overlay{
display:none;position:fixed;inset:0;background:rgba(27,27,27,0.65);z-index:200;
align-items:center;justify-content:center;padding:20px;
}
.crop-modal-overlay.is-open{display:flex;}
.crop-modal{background:#fff;border-radius:2px;padding:28px;max-width:360px;width:100%;text-align:center;}
.crop-modal h3{font-size:17px;margin:0 0 4px;}
.crop-modal-hint{font-size:13px;color:var(--mid-gray);margin:0 0 20px;}
.crop-viewport{
position:relative;width:220px;height:220px;margin:0 auto 22px;border-radius:50%;
overflow:hidden;background:#e2e2dc;cursor:grab;touch-action:none;
}
.crop-viewport:active{cursor:grabbing;}
.crop-viewport img{
position:absolute;top:0;left:0;max-width:none;max-height:none;
user-select:none;-webkit-user-drag:none;pointer-events:none;transform-origin:0 0;
}
.crop-zoom-row{display:flex;align-items:center;gap:10px;margin-bottom:24px;}
.crop-zoom-row i{color:var(--mid-gray);font-size:15px;flex-shrink:0;}
.crop-zoom-row input[type="range"]{flex:1;}
.crop-modal-actions{display:flex;gap:10px;justify-content:center;}
.crop-modal-actions .btn{flex:1;justify-content:center;}
/* MOCK CHECKOUT MODAL (placeholder for Stripe) */
.mock-checkout-overlay{
display:none;position:fixed;inset:0;background:rgba(27,27,27,0.65);z-index:200;
align-items:center;justify-content:center;padding:20px;
}
.mock-checkout-overlay.is-open{display:flex;}
.mock-checkout-modal{background:#fff;border-radius:2px;padding:28px;max-width:360px;width:100%;}
.mock-checkout-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.mock-checkout-badge{
font-family:'Plus Jakarta Sans',sans-serif;font-size:11px;font-weight:700;text-transform:uppercase;
letter-spacing:0.03em;padding:3px 10px;border-radius:2px;background:transparent;border:1px solid var(--charcoal);color:var(--charcoal);
}
.mock-checkout-close{background:none;border:none;font-size:22px;line-height:1;color:var(--mid-gray);cursor:pointer;padding:0;}
.mock-checkout-close:hover{color:var(--charcoal);}
.mock-checkout-modal h3{font-size:18px;margin:0 0 2px;}
.mock-checkout-amount{font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:26px;margin:0 0 20px;color:var(--charcoal);}
.mock-checkout-amount span{font-family:'Plus Jakarta Sans',sans-serif;font-weight:500;font-size:14px;color:var(--mid-gray);}
.mock-checkout-disclaimer{font-size:11px;color:var(--mid-gray);margin-top:16px;text-align:center;}
/* VOLUNTEER INTEREST MODAL — same overlay/card structure as the mock
checkout modal above, just under its own class names since it's a
different component (get-involved.html + homepage "Become a
volunteer" buttons, not a payment flow). */
.volunteer-modal-overlay{
display:none;position:fixed;inset:0;background:rgba(27,27,27,0.65);z-index:200;
align-items:center;justify-content:center;padding:20px;
}
.volunteer-modal-overlay.is-open{display:flex;}
.volunteer-modal{background:#fff;border-radius:2px;padding:28px;max-width:380px;width:100%;}
.volunteer-modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:4px;}
.volunteer-modal-head h3{font-size:18px;margin:0;}
.volunteer-modal-close{background:none;border:none;font-size:22px;line-height:1;color:var(--mid-gray);cursor:pointer;padding:0;flex-shrink:0;}
.volunteer-modal-close:hover{color:var(--charcoal);}
.volunteer-modal-desc{font-size:13px;color:var(--mid-gray);margin:0 0 16px;}
/* EVENT FORM MODAL (manage-events.html) — same overlay/card structure as
the volunteer modal above, just wider and scrollable since the event
form has a lot more fields. Used for both creating and editing an
event, not just one or the other. */
.event-form-modal-overlay{
display:none;position:fixed;inset:0;background:rgba(27,27,27,0.65);z-index:200;
align-items:center;justify-content:center;padding:20px;
}
.event-form-modal-overlay.is-open{display:flex;}
.event-form-modal{
background:#fff;border-radius:2px;padding:28px;max-width:640px;width:100%;
max-height:90vh;overflow-y:auto;
}
.event-form-modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:16px;}
.event-form-modal-head h3{font-size:18px;margin:0;}
.event-form-modal-close{background:none;border:none;font-size:22px;line-height:1;color:var(--mid-gray);cursor:pointer;padding:0;flex-shrink:0;}
.event-form-modal-close:hover{color:var(--charcoal);}
/* PHOTOS MODAL (manage-events.html, "Photos" button on a past event) —
reuses .event-form-modal-overlay/.event-form-modal above for the shell;
this is just the thumbnail grid inside it. */
.me-photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px;margin-top:8px;}
.me-photo-thumb{position:relative;aspect-ratio:1;border-radius:2px;overflow:hidden;background:var(--warm-white);}
.me-photo-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.me-photo-delete{
position:absolute;top:4px;right:4px;width:22px;height:22px;border-radius:50%;
border:none;background:rgba(27,27,27,0.65);color:#fff;font-size:15px;line-height:1;
cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;
}
.me-photo-delete:hover{background:rgba(27,27,27,0.9);}
.me-photo-delete:disabled{opacity:0.5;cursor:default;}
/* NEWSLETTER POPUP — small floating card, bottom-right of the homepage.
Hidden (translated down + faded) until main.js adds .is-visible after
the 15s delay. */
.newsletter-popup{
position:fixed;right:24px;bottom:24px;z-index:60;width:300px;
background:#fff;border-radius:2px;padding:22px;
border:1px solid rgba(0,0,0,0.06);box-shadow:0 16px 40px rgba(27,27,27,0.18);
transform:translateY(24px);opacity:0;pointer-events:none;
transition:transform 0.4s cubic-bezier(.22,.68,0,1.21), opacity 0.3s ease;
}
.newsletter-popup.is-visible{transform:translateY(0);opacity:1;pointer-events:auto;}
.newsletter-popup-close{
position:absolute;top:10px;right:10px;width:26px;height:26px;border-radius:50%;
border:none;background:transparent;color:var(--mid-gray);font-size:18px;line-height:1;
cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;
}
.newsletter-popup-close:hover{background:var(--warm-white);color:var(--charcoal);}
.newsletter-popup-eyebrow{
display:block;font-family:'Plus Jakarta Sans',sans-serif;font-size:11px;font-weight:700;
text-transform:uppercase;letter-spacing:0.04em;color:var(--mid-gray);margin-bottom:6px;
}
.newsletter-popup-title{font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:18px;margin:0 0 8px;padding-right:14px;}
.newsletter-popup-desc{font-size:13px;color:var(--mid-gray);margin:0 0 16px;}
.newsletter-popup-form{display:flex;flex-direction:column;gap:10px;}
.newsletter-popup-form .form-input{font-size:14px;padding:10px 12px;}
.newsletter-popup-form .btn{width:100%;justify-content:center;font-size:14px;padding:10px 16px;}
.newsletter-popup .form-hint{margin-top:10px;margin-bottom:0;}
/* MARKETING CONSENT (popup form) — sits between the email field and the
submit button, matching .newsletter-popup-form's own column layout. */
.newsletter-popup-consent{
display:flex;align-items:center;gap:8px;font-size:12px;color:var(--mid-gray);cursor:pointer;
}
.newsletter-popup-consent input{accent-color:var(--charcoal);flex-shrink:0;}
@media(max-width:600px){
.newsletter-popup{left:16px;right:16px;bottom:16px;width:auto;}
}
/* COOKIE/PRIVACY BANNER — sitewide, injected by main.js (not baked into
every page's HTML). Full-width bottom bar, dark to read as a system
notice rather than a promo card (that's the newsletter popup's job).
Hidden (slid down + faded) until main.js adds .is-visible. */
.cookie-banner{
position:fixed;left:0;right:0;bottom:0;z-index:70;
background:var(--charcoal);display:flex;align-items:center;justify-content:center;
gap:16px;flex-wrap:wrap;padding:14px 24px;
transform:translateY(100%);opacity:0;
transition:transform 0.4s cubic-bezier(.22,.68,0,1.21), opacity 0.3s ease;
}
.cookie-banner.is-visible{transform:translateY(0);opacity:1;}
.cookie-banner-text{margin:0;font-size:13px;color:#cfcfc7;max-width:640px;}
.cookie-banner-text a{color:#fff;}
.cookie-banner-dismiss{
background:transparent;border:1px solid rgba(255,255,255,0.4);border-radius:2px;color:#fff;
font-family:'Plus Jakarta Sans',sans-serif;font-weight:600;font-size:13px;padding:8px 18px;
cursor:pointer;flex-shrink:0;
}
.cookie-banner-dismiss:hover{border-color:#fff;background:rgba(255,255,255,0.08);}
/* Nudges the newsletter popup up for as long as the cookie banner is
also on screen, so the two fixed-position elements don't overlap. */
.newsletter-popup.has-cookie-banner{bottom:78px;}
@media(max-width:600px){
.cookie-banner{padding:12px 16px;text-align:center;justify-content:center;}
.newsletter-popup.has-cookie-banner{bottom:96px;}
}
/* SUPPORT — Concept 06 pattern: the whole intro+join-card row sits inside
a solid cyan block (was a plain white/cream section with no color
block at all), with the join-card itself popping as a cream card
against that cyan surround. Ink text throughout, per the same
gold/cyan-fill contrast rule documented in design.md. */
.support-grid{
background:var(--teal);border-radius:2px;padding:56px 48px;
grid-template-columns:1.15fr 1fr;align-items:center;column-gap:56px;
}
.support-intro{grid-column:1;}
.support-intro .eyebrow{color:var(--charcoal);}
.support-intro .eyebrow::before{background:var(--charcoal);}
.support-badges{display:flex;gap:10px;margin-top:16px;}
.support-badges .badge{border-color:var(--charcoal);color:var(--charcoal);}
.join-card{
grid-column:2;align-self:stretch;
background:var(--warm-white);border-radius:2px;border:none;padding:32px;
display:flex;flex-direction:column;
}
.join-title{font-weight:600;font-size:14px;margin:0 0 6px;}
.join-price{font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:30px;margin:0 0 8px;color:var(--charcoal);}
.join-price span{font-family:'Plus Jakarta Sans',sans-serif;font-weight:500;font-size:14px;color:var(--mid-gray);}
.join-note{font-size:13px;color:var(--mid-gray);margin:0 0 16px;}
.join-card a.btn{margin-top:auto;align-self:flex-start;}
@media (max-width:900px){
.support-grid{padding:36px 24px;}
}
/* SHOP — real product photos (assets/merch), each a clickable card
linking out to the Square storefront. No prices (see comment in
index.html) and no per-product URLs, so the whole card is one link. */
.shop-grid{grid-template-columns:repeat(4,1fr);}
.shop-card{
display:block;background:#fff;border-radius:var(--radius);border:1px solid rgba(0,0,0,0.06);
padding:16px;text-align:center;transition:border-color 0.15s ease,box-shadow 0.15s ease;
}
.shop-card:hover{border-color:rgba(0,0,0,0.16);box-shadow:0 8px 20px rgba(27,27,27,0.06);}
.shop-card .photo-block{
aspect-ratio:1/1;height:auto;width:100%;font-size:0;object-fit:contain;
border-radius:2px;padding:0;background:var(--warm-white);margin-bottom:12px;
}
.shop-name{font-weight:600;font-size:14px;color:var(--charcoal);}
/* EVENTS CHAPTER FILTER (events.html) */
.event-filter-group{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:24px;}
.event-filter-btn{
padding:9px 18px;border-radius:2px;border:1px solid rgba(0,0,0,0.15);background:#fff;
font-family:'Plus Jakarta Sans',sans-serif;font-weight:600;font-size:13px;color:var(--charcoal);cursor:pointer;
transition:background 0.15s ease,color 0.15s ease,border-color 0.15s ease;
}
.event-filter-btn:hover{border-color:var(--charcoal);}
.event-filter-btn.is-active{background:var(--charcoal);border-color:var(--charcoal);color:#fff;}
/* PROSE CONTENT — long-form text pages (Code of Conduct, and any future
page like a Privacy Policy). Not tied to one page on purpose. */
.prose-content{max-width:720px;padding-top:8px;padding-bottom:16px;}
.prose-content p{line-height:1.7;margin:0 0 20px;color:var(--charcoal);}
.prose-content ul{margin:0 0 20px;padding-left:22px;line-height:1.7;}
.prose-content li{margin-bottom:10px;}
.prose-content li:last-child{margin-bottom:0;}
.prose-content h2{font-size:21px;margin:40px 0 14px;}
.prose-content h2:first-child{margin-top:0;}
.prose-content .prose-updated{color:var(--mid-gray);font-size:13px;margin:-8px 0 32px;}
/* FOOTER */
footer{background:var(--charcoal);color:#cfcfc7;}
.sponsor-wall{padding-top:56px;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,0.1);}
.sponsor-logos{display:flex;flex-wrap:wrap;gap:16px;}
.sponsor-logo{
background:rgba(255,255,255,0.06);border-radius:2px;padding:20px 28px;text-align:center;
}
.sponsor-logo-name{font-family:'Plus Jakarta Sans',sans-serif;font-weight:600;font-size:14px;color:#fff;}
.footer-bottom{padding-top:40px;padding-bottom:40px;}
.footer-grid{grid-template-columns:repeat(5,1fr);}
.footer-col h4{color:#fff;font-size:13px;font-family:'Plus Jakarta Sans',sans-serif;font-weight:600;margin:0 0 12px;}
.footer-col a{display:block;color:#cfcfc7;font-size:13px;margin-bottom:8px;}
/* Honeypot field for the newsletter forms (see main.js) — visually
hidden rather than display:none/type=hidden, since some bots skip
those specifically. Real visitors never see or reach it; tabindex -1
and aria-hidden keep it out of the way for keyboard/screen-reader
users too. If it comes back filled, we quietly no-op the submit. */
.hp-field{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;}
/* FOOTER NEWSLETTER — subtle, monochrome, below the site-tree columns.
No teal/orange accents here on purpose, to stay quiet against the rest
of the (colorful) footer sponsor wall above it. */
.footer-newsletter{
display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;
padding-top:24px;margin-top:8px;border-top:1px solid rgba(255,255,255,0.1);
}
.footer-newsletter-label{font-size:13px;color:#8a8a84;}
.footer-newsletter-form{display:flex;gap:8px;flex-wrap:wrap;}
.footer-newsletter-input{
background:transparent;border:1px solid rgba(255,255,255,0.2);border-radius:2px;
padding:8px 14px;font-family:'Plus Jakarta Sans',sans-serif;font-size:13px;color:#fff;min-width:200px;
}
.footer-newsletter-input::placeholder{color:#6b6b66;}
.footer-newsletter-input:focus{outline:none;border-color:rgba(255,255,255,0.45);}
.footer-newsletter-btn{
background:transparent;border:1px solid rgba(255,255,255,0.4);border-radius:2px;color:#cfcfc7;
font-family:'Plus Jakarta Sans',sans-serif;font-weight:600;font-size:13px;padding:8px 18px;cursor:pointer;
}
.footer-newsletter-btn:hover{border-color:#fff;color:#fff;}
.footer-newsletter-status{font-size:12px;color:#8a8a84;margin:8px 0 0;width:100%;}
/* MARKETING CONSENT (footer form) — width:100% forces it onto its own
line below the input/button row despite .footer-newsletter-form's
flex-wrap (same reason .account-detail-actions needs flex-basis:100%
elsewhere: flex children can just shrink instead of wrapping unless
forced). Muted to match the rest of the footer's monochrome treatment. */
.footer-newsletter-consent{
display:flex;align-items:center;gap:8px;width:100%;
font-size:12px;color:#8a8a84;cursor:pointer;
}
.footer-newsletter-consent input{accent-color:#8a8a84;flex-shrink:0;}
.footer-legal{
display:flex;justify-content:space-between;align-items:center;padding-top:24px;
border-top:1px solid rgba(255,255,255,0.1);font-size:12px;color:#8a8a84;flex-wrap:wrap;gap:12px;
}
.footer-social{display:flex;align-items:center;gap:14px;}
.footer-social a{color:#8a8a84;display:inline-flex;transition:color 0.15s ease;}
.footer-social a:hover{color:var(--teal);}
@media(max-width:900px){
.stats-grid{grid-template-columns:repeat(2,1fr);}
.audience-grid,.footer-grid,.involved-grid,.involved-grid-3,.testimonial-grid,.pillars-grid,.board-grid,.shop-grid{grid-template-columns:repeat(2,1fr);}
.footer-newsletter{flex-direction:column;align-items:flex-start;}
.footer-newsletter-form{width:100%;}
.footer-newsletter-input{flex:1;min-width:0;}
.involved-feature{grid-template-columns:1fr;gap:28px;}
.involved-feature-media img{height:260px;}
.tier-cards{grid-template-columns:1fr;}
.form-row{grid-template-columns:1fr;}
.directory-teaser-grid{grid-template-columns:1fr;gap:24px;margin-top:20px;}
.support-grid{grid-template-columns:1fr;}
.support-intro,.join-card{grid-column:1;}
.join-card{margin-top:24px;}
.video-library-grid{grid-template-columns:1fr;}
.join-options-grid{grid-template-columns:1fr;}
.hero{padding-top:16px;}
.hero-photo-box{aspect-ratio:4/5;border-radius:2px;}
.hero-photo-type{left:6%;right:6%;bottom:6%;}
.hero-photo-type h1{font-size:28px;}
.hero-photo-type .hero-sub{font-size:15px;margin:10px 0 18px;}
.hero-photo-type .hero-ctas{gap:10px;}
.hero-photo-type .btn{padding:10px 18px;font-size:14px;}
.menu-toggle{display:flex;}
nav{
display:none;position:absolute;top:100%;left:0;right:0;z-index:20;
background:var(--warm-white);border-bottom:1px solid rgba(0,0,0,0.06);
padding:8px 24px 16px;
}
nav.is-open{display:block;}
nav ul{display:flex;flex-direction:column;align-items:stretch;gap:0;}
nav ul li{border-top:1px solid rgba(0,0,0,0.06);}
nav ul li:first-child{border-top:none;}
nav a{display:flex;padding:14px 0;font-size:15px;}
.nav-divider{margin-left:0;padding-left:0;border-left:none;margin-top:6px;}
nav ul li:last-child{border-top:none;padding-top:10px;}
nav ul li:last-child a{padding:12px 22px;width:100%;justify-content:center;}
/* directory: sidebar stacks above, grid drops to 1 across */
.directory-layout{grid-template-columns:1fr;}
.directory-sidebar{position:static;}
.filter-groups-row{display:flex;gap:16px;overflow-x:auto;padding-bottom:4px;}
.filter-groups-row .filter-group{margin-bottom:0;min-width:150px;flex:1;}
.profile-grid{grid-template-columns:1fr;}
.directory-main-head{flex-direction:column;align-items:stretch;}
.directory-main-head a.btn{width:100%;justify-content:center;}
.page-header{padding:32px 0 24px;}
}
@media(max-width:600px){
/* events: 1 column on phones (2 columns down through the 900px
tablet breakpoint above) — .photo-block no longer needs an override
here since the base rule (width:100%, height:auto, no fixed
aspect-ratio) already shrinks/grows to fit at any width. */
.events-list{grid-template-columns:1fr;}
.involved-grid,.involved-grid-3,.testimonial-grid,.pillars-grid,.board-grid,.shop-grid{grid-template-columns:1fr;}
/* directory: full-width stacked filters instead of horizontal scroll */
.filter-groups-row{display:block;overflow-x:visible;}
.filter-groups-row .filter-group{min-width:0;margin-bottom:20px;}
.filter-groups-row .filter-group:last-child{margin-bottom:0;}
.profile-actions{flex-direction:column;}
.profile-actions .btn{width:100%;justify-content:center;}
.profile-hero{flex-direction:column;text-align:center;padding:32px 24px;}
.profile-hero-badges,.profile-hero-actions{justify-content:center;}
.profile-featured-image{height:200px;margin-top:24px;}
.checkin-status-layout{grid-template-columns:1fr;gap:28px;text-align:center;}
.checkin-status-headline{font-size:40px;}
.checkin-status-list{max-height:none;}
/* account.html's "Personal details" rows (.account-detail-row) put
icon + content + actions on one line at desktop width, with actions
never shrinking (flex-shrink:0) — fine when there's room, but on a
phone that forced the label/value text into a too-narrow column
instead of ever giving up space itself. Below 600px, drop the
actions to their own full-width row instead, same "give buttons
their own line rather than fight the text for space" fix already
used for the Edit/Delete/Photos row on manage-events.html. */
.account-detail-row{flex-wrap:wrap;}
/* flex-basis:100%, not just flex-wrap on the row — .account-detail-
content can shrink all the way to 0 width (min-width:0), so a plain
wrap would never actually trigger; forcing actions to claim the
full line width is what guarantees it drops to its own row instead
of squeezing the label/value text down to make room beside it. */
.account-detail-actions{flex-basis:100%;margin:10px 0 0 34px;width:calc(100% - 34px);}
}